Rumah  >  Artikel  >  hujung hadapan web  >  实现CSS四种方式和选择器介绍

实现CSS四种方式和选择器介绍

零下一度
零下一度asal
2017-06-24 14:18:491407semak imbas

CSS实现和选择器

本课内容:

一、实现CSS四种方式

1,每个html标签中都有一个style样式属性,该属性的值就是css代码。(针对一个标签)
2,使用style标签的方式。 一般都定义在head标签中。(针对多个相同的标签)
3,当多个页面使用相同样式时,可将样式单独封装为CSS文件导入

4,通过HTML头标签中的link标签链接一个CSS文件


二、选择器


标签选择器 div{}
类选择器 .haha
id选择器 #qq  (id的取值在页面中是唯一的,因为该属性除了给CSS使用,还要给javascript使用)
类选择器和id选择器用法一样,id选择器的优先级比类选择器高,优先级越少越高

 

三、CSS笔记

css:将网页内容和显示样式进行分离,提高了显示功能。

 

CSS层叠样式表cascading style sheets

       将网页中的样式单独分离出来,完全由CSS控制,增强样式复用性和扩展性。

格式:选择器{属性名:属性值;属性名:属性值;……}

CSS与HTML结合的4中方式:

1、每个HTML标签都有style属性

2、当页面中有多个标签具有相同样式时,可定义style标签封装样式以复用

      

3、当多个页面使用相同样式时,可将样式单独封装为CSS文件导入

      

4、通过HTML头标签中的link标签链接一个CSS文件

      

技巧:为提高样式的复用性和可扩展性,将多个样式单独定义并封装为CSS文件,如p.css、div.css……在一个总的CSS文件中,使用import导入这些CSS文件,然后在HTML页面中用link标签将这个总的CSS文件导入即可。

优先级:就近原则       标签上设置的style属性可以覆盖其他样式

 

选择器:

1、标签选择器:每个HTML标签名即为一个选择器

2、类选择器:标签中的class属性指定   定义样式要加点  js引用时用className

3、ID选择器:标签的id属性,尽量保证唯一,便于JavaScript获取元素

4、扩展选择器:

       a、关联选择器:标签中的标签  table div表示表格中的div区域

       b、组合选择器:多个选择器     逗号分隔

       c、为元素选择器:元素的状态 如超链接的默认状态、点击状态、悬停状态等

                     a:link      a:visited         a:hover           a:active   LVHA顺序

                     删除超链接默认下划线:text-decoration:none

                     p:first-letter    p:first-line             focus:IE6不支持

CSS滤镜:通过一些代码丰富了的样式

网页设计时,DIV+CSS

       DIV和P标签都属于行级区域,回车效果,SPAN标签为块级区域,无回车效果

       可加border、color等属性,P标签中不要嵌套DIV标签

 

四、代码一

 1 <!-- 2 本课内容: 3 一、实现CSS四种方式 4 1,每个html标签中都有一个style样式属性,该属性的值就是css代码。(针对一个标签) 5 2,使用style标签的方式。 一般都定义在head标签中。(针对多个相同的标签) 6 3,当多个页面使用相同样式时,可将样式单独封装为CSS文件导入 7     <style type=”text/css”>@import url(“1.css”);</style> 8 4,通过HTML头标签中的link标签链接一个CSS文件 9     <link rel=”stylesheet” href=”1.css” media属性可选,默认设备屏幕/>10 二、选择器11 标签选择器 div{}12 类选择器 .haha13 id选择器 #qq  (id的取值在页面中是唯一的,因为该属性除了给CSS使用,还要给javascript使用)14 类选择器和id选择器用法一样,id选择器的优先级比类选择器高,优先级越少越高 
15  -->16 <!DOCTYPE html>17 <html>18 <head>19 <meta charset="UTF-8">20 <title>Insert title here</title>21 <!-- type指定下面的css以什么方式解析 -->22 <!--指定这两个样式都作用与div,所以用div后的大括号括起来-->23 <!-- css一般放在头部,因为要预先加载,所以每个出现div的位置都已经被换了样式 -->24 <!--25 第二种方式:26 标签选择器27 div{28         background-color: #000;29         color: #FFF    
30     }31 32  -->33 <!-- @IMPORT url("div.css?1.1.11");第三种方式 -->34 <!-- 第四种 link -->35 <link rel="stylesheet" href="div.css?1.1.11" type="text.css?1.1.11">36 <style type="text/css">37 /*38     @IMPORT url(1.css);39     @IMPORT url(div.css);40 @IMPORT url(span.css);41 */42 div.haha{43     background-color: #000;44 }45 </style>46 <!-- 类选择器div.haha 优先级比标签选择器高 约少数,优先级越高 -->47 <!-- 类选择器不仅可以相同标签的少部分做,还可以对不同的标签做 -->48 <!-- div.haha中的div可以不写,.haha,那就所有的有哈哈类的都变了 -->49 <!-- 按钮加多套这样的.haha实现动态样式 -->50 </head>51 <body>52     <!--53     css和html相结合的第一种方式54     1,每个html标签中都有一个style样式属性,该属性的值就是css代码。(针对一个标签)55     2,使用style标签的方式。 一般都定义在head标签中。(针对多个相同的标签)56     3,当多个页面使用相同样式时,可将样式单独封装为CSS文件导入57     <style type=”text/css”>@import url(“1.css”);</style>58     4,通过HTML头标签中的link标签链接一个CSS文件59     <link rel=”stylesheet” href=”1.css” media属性可选,默认设备屏幕/>60 61      -->62      <!--  -->63 64 65     <!-- 样式的重叠 重复样式一最后加载为主,不重复样式层叠,其实都是层叠 -->66     <!-- color: #F00 为颜色的缩写 -->67     <div style ="color: #F00">这是一个div区域1</div>68     <div class="haha">这是一个div区域2</div>69     <span>span区域1</span>70     <span>span区域2</span>71     <p>这是一个段落1</p>72     <p>这是一个段落2</p>73 74     75 </body>76 </html>

 

 

五、代码二

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>无标题文档</title><!--link rel="stylesheet" href="1.css?1.1.11" type="text/css" /--><style type="text/css">/*@import url(1.css);

div{
        background-color:#09F;
        color:#FFF;
}
.haha{
    background-color:#FF3;
    color:#0C0;
}*//*预定样式,实现动态的加载。.hehe{
    background-color:#C93;
    color:#00F;
}*//*#qq{通常ID的取值在页面中是唯一的,因为该属性除了给css使用,还可以被js使用。id通常都是为了去标示页面中一些特定区域使用的。
    background-color:#000;
    color:#FFF;
}*//*span b{关联选择器 选择器中的选择器background-color:#09F;
    color:#FFF;
}*//*组合选择器*//*.haha,div b{对多种选择器进行相同样式定义background-color:#000;
    color:#C00;
}*//*伪元素

超链接的状态。*//*未访问*/a:link{background-color:#06F;color:#FFF;text-decoration:none;font-size:18px;}/*鼠标悬停*/a:hover{background-color:#FFF;color:#F00;font-size:24px;}/*点击效果*/a:active{background-color:#000;color:#FFF;font-size:36px;}/*访问后效果*/a:visited{background-color:#FF9;color:#000;text-decoration:line-through;}p:first-letter{font-size:36px;color:#F00;}div:hover{background-color:#F00;color:#FFF;}input:focus{background-color:#09F;}#qq{float:left;}/*L  V  H  A*/</style></head><body><input type="text" /><input type="text" /><hr /><a href="http://www.sina.com.cn" target="_blank">伪元素选择器演示</a><hr /><!--css和html相结合的第一种方式。
    1,每一个html标签中都有一个style样式属性。该属性的值就是css代码。 
    2,使用style标签的方式。 一般都定义在head标签中
    
    
    优先级:标签选择器<类选择器<id选择器<style属性    --><div id="qq">这是一个div<b>区域</b>1</div><div class="haha" id="qq">这是一个div区域2</div><span>span<b>区域</b>1</span><span class="haha">span区域2</span><p>这是一个段落1</p><p class="haha">这是一个段落2</p></body></html>

 

Atas ialah kandungan terperinci 实现CSS四种方式和选择器介绍. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Kenyataan:
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn