三 . css系列之语法、样式表-CSDN博客

42 阅读4分钟
(一)css简介及基本语法
1. 什么是CSS:Cascading Style Sheet层叠样式表,用于修饰和美化HTML标签的一种计算机语言,能够实现结构表现的分离。
2. CSS基本语法
   选择器{
       属性:属性值;
       属性:属性值;
   ......
   }
3. 选择器:选择器也叫作选择符,作用是告诉浏览器,样式的应用对象
4. 选择器的种类:标签选择器(元素选择器)、类选择器、id选择器、全局选择器(通配符选择器)、群组选择器、子集选择器、后代选择器、属性选择器、动态伪类选择器…..
   a. 标签选择器(元素选择器):拿HTML标签做选择器,作用是使文档中的相同标签应用相同样式
   b. 类选择器:作用是对某个元素单独设置样式,进行修饰
       第一步:设置名称`<p class="类名"></p>`
       第二步:设置样式/类名{样式}
       类选择器的注意事项
           1.类的名称的命名规则
              由字母、数字、下划线构成
              不可以有汉字
              不可以以数字开头
              不可以是关键字
           2.一个文档中类名可以相同
           3.一个类可以有多个名
   c. id选择器:作用是对某个元素单独设置样式,进行修饰
       第一步:设置名称<p id="id名"></p>
       第二步:设置样式  #id名{样式}
       注意:类选择器和id选择器的区别是
          1.一个文档中,类名可以相同,但是id名不可以重复
          2.id的权重大于类的权重,换句话id的样式优先于类的样式

   d. 全局选择器(通配符选择器):使用*号作为选择器,作用是使所有元素应用同种样式
   e. 群组选择器:就是指用逗号将多个选择器分隔开,是它们形成一个组,应用同种样式
   f. 动态伪类选择器
        :link    默认样式(应用对象是超级链接)
        :visited    访问过后的样式(应用对象是超级链接)
        :hover     鼠标滑过元素时的样式(应用对象可以是超级链接,也可以是其它元素)
        :active    鼠标激活时的样式(应用对象可以是超级链接,也可以是其它元素)
        在使用四个动态伪类时一定要注意顺序问题:LVHA
        :focus    获得焦点时的样式
(二)css样式表
1. 样式表的应用:行内样式表、内部样式表、外部样式表、导入样式表
a. 行内样式表:指将样式表写在HTML标签的开始标签中,用style做关键字,行内样式表通常用来修饰个别的局部元素,弊端是没有实现结构和表现的分离,所以行内样式使用的频率并不高
b. 内部样式表(内嵌样式表),通常写在HTML文档的<head>标签中,格式如下
<head>
    <style type="text/css">
        样式
    </style>
</head>
注意:当对一个文档做样式的修饰时,可以选用内部样式表,弊端也没有真正实现结构和表现的分离

c. 外部样式表:所谓外部样式表是指将CSS样式写在一个单独的CSS文件中,然后使用<link>标签将CSS文件和HTML文件关联起来,该种样式表真正实现了结构和表现的分离,是我们学习和工作中最为常用的一种样式表。格式:
<head>
    <link rel="stylesheet" type="text/css" href="CSS文件的路径" />
</head>
d. 导入样式表:只做了解
<head>
    <style type="text/css">
        @import "样式表的路径";
    </style>
</head>
2. 样式表的优先级
行内样式表的优先级>内部样式表的优先级
内部样式表和外部样式表的优先级取决于样式表的加载顺序,后加载的样式表优先显示
就近原则
3. 样式表的特性:样式表的继承、样式表的覆盖
继承:后代元素会从祖先元素那里继承样式
覆盖:如果选择器的权重相同,那么同种属性,后设置的样式会覆盖先设置的样式
4. CSS样式的注释
HTML文档的注释:`<!--注释内容-->`
CSS文档的注释:`/*注释内容*/`
注释的好处:
    结构清晰,方便维护
    有利于代码调错