欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识！
您现在的位置是： 首页  >  IT编程

前端开发CSS3——使用方式和选择器

程序员文章站 2022-03-21 18:39:56
CSS是Cascading Style Sheets（层叠样式表）的简写，用于修饰文档的语言，可以修饰HTML、XML、SVN。每个语言都有每个语法的规则：CSS声明、CSS声明块、CSS选择器、CSS规则。 1、css声明简单来说就是一个键值对的形式，类似于 color: black; 2、css ......

css是cascading style sheets（层叠样式表）的简写，用于修饰文档的语言，可以修饰html、xml、svn。每个语言都有每个语法的规则：css声明、css声明块、css选择器、css规则。

　　1、css声明简单来说就是一个键值对的形式，类似于　　color: black;

　　2、css声明块就是用大括号{}括起若干个css声明，类似于　　{color: black; background-color: white;}

　　3、css选择器就是某个或者一组标签的标识，类似于　　p、div

　　4、css规则就是前面三个的总结，类似于　　p{color: black; background-color: white;}

　　注意：css的注释是/* 这里是注释内容 */

我们虽然知道css的规则了，怎么将css规则用于修饰被修饰的文档。xml文件和svn文件博主也不知道也没有深度的了解，这里只讲述html文件怎么引入css文件。html文件引入css文件有三种方式：

　　1、外部样式表

　　　　外部样式表的引入方式有两种情况，link标签方式引入效率高，一般是用到哪个标签就导入哪个标签；@import方式和style方式效率不高，浏览器会全部读取样式表的样式。

　　　　　　link标签引入（推荐）：

<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>样式表的引入方式</title>
    <link rel="stylesheet" href="./css/select1.css">
</head>
<body>
    <p>这是一个p标签</p>
</body>
</html>

　　　　　　@import url()引入只能写在style标签里的第一行，否则导入不成功：

<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>样式表的引入方式</title>
    <!-- <link rel="stylesheet" href="./css/select1.css"> -->
    <style>
        @import url("./css/select1.css")
    </style>
</head>
<body>
    <p>这是一个p标签</p>
</body>
</html>

　　2、内部样式表

　　　　在html文件样式直接写在style标签中

<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>样式表的引入方式</title>
    <style>
        p{
            height: 80px;
            width: 500px;
            font-size: 20px;
            text-align: center;
            border: 2px solid black;
            margin: 10px;
            line-height: 80px;
        }
    </style>
</head>
<body>
    <p>这是一个p标签</p>
</body>
</html>

　　3、行内样式表

　　　　直接写在当前的标签中，用style属性列举起来，类似于　　<p style="color: black; background-color: white;"></p>

　　这四种引入方式也是有顺序的（相对于共同属性而言）优先取行内样式表，如果style标签中有@import 和 style里样式，就什么样式都不会有，不允许同时导入；如果既有style标签引入有link标签引入，就取后来引入的即可。这里不做测试

 css的选择器有很多种，可以分为如下几种，个别选择器会举例说明

　　1、标签选择器

　　　　标签选择器又叫元素选择器，换句话说，html文档的元素/标签就是最基本的选择器，使用元素名称直接选中元素即可。

　　　　　　p{color:balck; background-color: white;}

　　2、类选择器

　　　　类选择以点"."开头，后面紧跟一个类名。类名不允许有空格，与元素/标签中class属性 的值保持一致。一个元素可以有多个class的值，每个值通过空格分割开。类名相同的元素属于一类元素。

　　　　　　.classname{color:balck; background-color: white;}

　　3、id选择器

　　　　id选择器以"#"开头，后面紧跟一个id名，在一个html文档中，元素/标签id值能重复，html文档只能识别第一次出现的id值，因此在选择文档中唯一元素的时候该选择器比较有用。

　　　　　　#idname{color:balck; background-color: white;}

　　4、普遍选择器

　　　　使用"*”来表示普遍选择器，表示选择所有元素/标签，通常用在组合选择器中。

　　　　　　*{color:balck; background-color: white;}

　　5、后代选择器

　　　　使用 “  ” 隔开两个选择器。例如 “ul li”表示选择ul的后代元素li，li可以为ul的直接子元素，也可以为ul的孙子元素。

　　6、子代选择器

　　　　使用 “>” 隔开两个选择器。例如 "ul>li"表示选择ul的直接子代元素li,ul的孙子元 素li无法被选择到

　　7、相邻同胞选择器

　　　　使用 “+” 隔开两个选择器。例如 ".one+*"表示选择class为"one"元素的下一个兄弟（相邻兄弟）元素，如果用其他选择器代表 * ，那么这个选择器的样式就只会找“.one”元素相邻元素且指定选择器。

<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>样式表的引入方式</title>
    <link rel="stylesheet" href="./css/select1.css">
    <style>
        p+span{
            /*指定下一个相邻的选择器为span标签*/
            color: red;
        }
    </style>
</head>
<body>
    <!-- 不会选中div选择器 -->
    <p>这是一个p标签</p>
    <div>
        <!-- 不会选中h5选择器 -->
        <p>p1</p>
        <h5>h511</h5>
        <span>span1</span>
        <span>span2</span>
        <a href="">a1</a>
        <a href="">a2</a>
        <p>p2</p>
        <!-- 会选中 -->
        <span>span3</span>
    </div>
</body>
</html>

　　8、一般同胞选择器

　　　　使用 “~” 隔开两个选择器。例如 ".one~*"表示选择class为"one"元素的所有兄弟元素，可以指定具体的选择器，就会选择当前元素的所有指定选择器的兄弟元素。

　　9、多选择器

　　　　多个选择器并列使用，使用“,”分割。

　　　　　　.classname, #idname, p{color:balck; background-color: white;}

　　10、组合选择器

　　　　多个选择器组合使用。例如 "div.one" 表示class为one的div元素。

　　11、属性选择器

　　　　[attr] 选择具有attr属性的元素、无论该属性的值为什么

　　　　[attr=val] 选择具有attr属性的、并且attr的值为val元素 

　　　　[attr~=val] 选择具有attr属性的、并且attr的值之一为val的元素 

　　　　[attr^=val] 选择具有attr属性的、并且attr的值以val开头的元素

　　　　[attr$=val] 选择具有attr属性的、并且attr的值以val结尾的元素

　　　　[attr*=val] 选择具有attr属性的、并且attr的值包含val的元素

　　12、伪类选择器

　　　　伪类以":"开头，用在选择器后，用于指明元素在某种特殊的状态下才能被选中

　　　　表示子元素的（表示当前元素是作为孩子元素）

　　　　　　 :only-child     独生子元素

　　　　　　 :first-child　　第一个孩子

　　　　　　 :last-child 　　最后一个孩子

　　　　　　 :nth-child(n) 、: nth-last-child(n)　　第几个孩子、倒数第几个孩子

　　　　　　　　n可以为元素的序号，从1开始，也可以为特殊的字符，比如奇数“odd”，偶数“even”

　　　　　　:first-of-type、:last-of-type 、 

　　　　　　:nth-of-type(n)、:nth-last-of-type(n)

　　　　　　　　n可以为元素的序号，从1开始，也可以为特殊的字符，比如奇数“odd”，偶数“even”

　　　　当前元素状态相关 

　　　　　　:hover、 :active、 :focus　　鼠标悬停、鼠标点击、元素聚焦

　　　　　　:enabled、 :disabled；:checked、 :default　　元素可用、不可用、选中（适用于radio和checkbox的input标签）、默认值

　　　　　　:invalid、 :valid、 :required、 :optional、 :in-range 、:out-of-range　　元素无需验证、需要验证、必填、可选的、范围内、不在范围内

　　13、伪元素选择器

　　　　伪元素以"::"开头，用在选择器后，用于选择指定的元素。

　　　　　　::after       在当前元素之后添加内容

　　　　　　::before　　在当前元素之前添加内容

　　　　　　::first-letter　　当前元素的第一个字符

　　　　　　::first-line　　当前元素的第一行

　　　　　　::selection　　当前元素用户选中的字符

 

如果css样式表中的多个样式选中同一个元素时，呈现的效果是由于哪个样式决定的呢？其实css还有一个名字叫级联样式表，即解析的时候会根据级联决定html文档元素的呈现效果。css给每个选择器赋值一个特性值。

　　1、如果在某个选择器里属性值后面添加了 !important表示这个选择器最重要

　　2、通过4个特性值来量化一个选择器 （多个选择器合在一起，特性值也会叠加的）

　　　　thousands

　　　　　　• 声明在元素的style属性中。特性值记为1000

　　　　hundreds

　　　　　　• 包含在一个选择器中的所有id选择器

　　　　tens

　　　　　　• 包含在一个选择器中的所有类选择器，属性选择器，伪类选择器

　　　　ones

　　　　　　• 包含在一个选择器中的所有元素选择器，伪元素选择器

　　3、如果多个竞争选择器具有相同的重要性和特性值，代码顺序就发挥作用 了，后来规则优先前面规则。

　　4、继承（inheritance）

　　　　css中有些规则将会默认被子元素继承，有些则不会。比如font系列属性，文本系列属性、列表系列属性，cursor

　　　　css提供了三个特殊的值用来处理继承

　　　　　　1) inherit 继承父元素的样式（常用）

　　　　　　2) initial 不继承。应用浏览器的默认样式（不常用）

　　　　　　3) unset 不设定，表现该规则本来特性，即如果该规则具有继承属性则继承， 否则不继承。（不常用）

 

上一篇： assert（断言）

下一篇： 别迟到了

推荐阅读