前端开发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 不设定，表现该规则本来特性，即如果该规则具有继承属性则继承， 否则不继承。（不常用）
前端开发CSS3——使用方式和选择器的更多相关文章
- web前端开发:css3实现loading
web前端开发:css3实现loading 有大量web前端开发工具及学习资料,可以搜群[ web前端学习部落22群 ]进行下载,遇到学习问题也可以问群内专家以及课程老师哟 <!DOCTYPE ...
- 1+x 证书 Web 前端开发 CSS3 专项练习
官方QQ群 1+x 证书 Web 前端开发 CSS3 专项练习 http://blog.zh66.club/index.php/archives/196/
- 前端CSS css引入方式 css选择器 css选择器优先级
一. CSS介绍 CSS(Cascading Style Sheet,层叠样式表)定义如何显示HTML元素,给HTML设置样式,让它更加美观. 当浏览器读到一个样式表,它就会按照这个样式表 ...
- 1+x证书Web前端开发CSS3详细教程
web 前端开发之 CSS3 新特性 http://blog.zh66.club/index.php/archives/189/ web 前端开发之 html5 新特性 http://blog.zh6 ...
- 前端开发HTML&css入门——CSS&选择器练习
CSS 层叠样式表 (Cascading Style Sheets)css可以用来为网页创建样式表,通过样式表可以对网页进行装饰.所谓层叠,可以将整个网页想象成是一层一层的结构,层次高的将会覆盖层次低 ...
- 前端开发中常用的CSS选择器解析(一）
你也许已经掌握了id.class.后台选择器这些基本的css选择器.但这远远不是css的全部.下面向大家系统的介绍css中最常用的选择器,包括我们最头痛的浏览器兼容性问题.掌握了它们,才能真正领略cs ...
- 前端开发CSS3——文本样式和盒子及样式
博主废话少说,直接介绍css常用的属性和属性值:属性和值只需过一遍,页面的结构还是需要布局,布局的只是后期会更新的. 提供一些图标的网站:font-awesome: http://fontaw ...
- 1+x 证书 web 前端开发初级对应课程分析
响应国家号召 1+X 证书 Web 前端开发考试样题 官方QQ群 1+x 证书 web 前端开发初级对应课程分析 http://blog.zh66.club/index.php/archives/19 ...
- 响应国家号召 1+X 证书 Web 前端开发考试模拟题
1+x证书Web前端开发初级理论考试样题2019 http://blog.zh66.club/index.php/archives/149/ 1+x证书Web前端开发初级实操考试样题2019 http ...
随机推荐
- 微信小程序json与xml互相转换
1.首先在目录结构中引入必要的js文件 https://files.cnblogs.com/files/qianyou304/x2j.rar 2.js中代码如下:(部分)json 2 xml var ...
- iOS 禁用`URL Scheme`和`Universal Link`(通用链接)
为什么要禁用URL Scheme和Universal Link(通用链接) 通常我们APP中都会嵌套一些web页面,有时我们的web页面会被DNS劫持从而跳转到其他APP中:或者是某些APP的Univ ...
- Python3使用线程
Python2标准库中提供了两个模块thread和threading支持多线程.thread有一些缺陷在Python3中弃用,为了兼容性,python3 将 thread 重命名为 "_th ...
- CODING 受邀参加《腾讯全球数字生态大会》
近日,腾讯全年最重要的一场活动--<腾讯全球数字生态大会>于昆明滇池国际会展中心正式举办.此次全球数字生态大会是腾讯战略升级后,整合互联网+数字经济峰会.云+未来峰会.腾讯全球合作伙伴三大 ...
- linux系统管理-输入输出
目录 linux系统管理-输入输出 参数传递xargs linux系统管理-输入输出 重定向 将原本要输出到屏幕上的数据信息,重新定向到指定的文件中 运行程序,或者输入一个命令:默认打开4个文件描述符 ...
- Eclipse为不同的文件类型设置编码格式和编辑器
不知道大家遇到项目中编码格式不统一的情况没有,哈哈,我们就是,比如java的编码格式是GBK,html等编码是UTF-8,这样会导致很多问题,比如提交了一个UTF-8的java文件到SVN,会导致后端 ...
- Angular 学习笔记（四）
作用域和控制器的交互情况: 1.控制器通过作用域对模板暴露一些方法供其调用 2.控制器中定义的一些方法可改变注册在作用域下的数据模型 3.控制器在某些场合可能需设置监听器来监听作用域中的数据模型:这些 ...
- [视频教程] 使用docker的方式安装redis
直接使用docker拉取redis的镜像,并且进行端口映射与文件目录共享,这样可以直接在宿主机的端口上就可以进行访问了.其实本质上也是在一个简化版的ubuntu的容器内安装好的redis-server ...
- STL顺序容器的基本操作
容器主要分为:顺序容器和关联容器 顺序容器和关联容器,顺序容器主要有:vector.list.deque等.其中vector表示一段连续的内存地址,基于数组的实现,list表示非连续的内存,基于链表实 ...
- ts开发环境搭建
ts为typescript的缩写,是javascript的超集. npm源改为国内 由于 Node 的官方模块仓库网速太慢,模块仓库需要切换到阿里的源. npm config set registry ...