首页 > > 网页制作 > css >

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

2019-09-17 09:53:42来源：博客园阅读 ()

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

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 不设定，表现该规则本来特性，即如果该规则具有继承属性则继承，否则不继承。（不常用）

原文链接:https://www.cnblogs.com/aitiknowledge/p/11505858.html
如有疑问请与原作者联系

标签：

版权申明：本站文章部分自网络，如有侵权，请联系：west999com@outlook.com
特别注意：本站所有转载文章言论不代表本站观点，本站所提供的摄影照片，插画，设计作品，如需使用，请与原作者联系，版权归原作者所有

上一篇：html引入公共模块

下一篇：html/css中相对定位relative和绝对定位absolute的用法

IDC资讯：主机资讯注册资讯托管资讯 vps资讯网站建设

网站运营：建站经验策划盈利搜索优化网站推广免费资源

网站联盟：联盟新闻联盟介绍联盟点评网赚技巧

行业资讯：搜索引擎网络游戏电子商务广告传媒

网络编程： Asp.Net编程 Asp编程 Php编程 Xml编程 Access Mssql Mysql 其它

服务器技术： Web服务器 Ftp服务器 Mail服务器 Dns服务器安全防护

软件技巧：其它软件 Word Excel Powerpoint Ghost Vista QQ空间 QQ FlashGet 迅雷

网页制作： FrontPages Dreamweaver Javascript css photoshop fireworks Flash

程序设计： Java技术 C/C++ VB delphi

网络知识：网络协议网络安全网络管理组网方案 Cisco技术

操作系统： Win2000 WinXP Win2003 Mac OS Linux FreeBSD

热门词条

最新资讯

热门关注

热门标签