css是什么和css选择器

css意思为层叠样式表（层叠性），用于控制网页样式

css作用：1.弥补html语言的不足。2.缩短页面代码，加快访问速度。3代码减少，页面文件就会小，占用网络宽度少，打开速度变快，提高用户体验。

css语法由选择符和声明组成，声明由属性和属性值组成

选择器{属性：属性值；属性：属性值；}

1）声明比放在花括号内，属性和属性值链接，

2）每个声明用分号结束

3）当一个属性有多个属性值时，每个属性值之间用空格隔开，不分先后。

4）在书写样式中，空格、换行等不影响属性显示。

css样式表有内部样式表、外部样式表、内联样式表

内部样式表可以写在任何地方，但一般都写在<head>方便与HTML区别开

<style type="text/css">

css语句

<./style>

type="text/css">可省略

外部样式表（常用）

第一种（常用）

<head>

<link rel="stylesheet" href=" "/>

</head>

第二种

<style type="text/css">

@import url("目标路径");

</style>

两者区别

1.@import是css提供的一种方式，只能加载css， link是HTML的标签，除了加载css还能定义css

2.加载顺序：link引用的css会合页面一起加载，而@import引用的css页面要等到页面全部被下载出来再被加载

3.兼容性，link兼容性比@import好，@import在低于ie5的识别不了

4.js可以控制dom去改变link里面的样式标签，而@import不可以

行内样式表（又名内联内嵌）

<标签 style="属性1：属性值；属性2：属性值2；属性3：属性值3..."></标签>

权重：内联>外部>内部

css选择器

常用的

类型选择器	div{} p{}	权重：0001
类选择器	class	权重：0010
ID选择器	#id名{}	权重：100
伪类选择器	a:link，a:visited e:hover，e:active	权重：0010
通配符	*{}	权重：
群组选择符	选择符1，...选择符2，{}	权重：它本身的假起来
包含选择符	选择器1（父级）选择器2（子级）{}	权重：包含的选择符权重加起来
属性选择符	e:[]	权重：0010
伪对象（伪元素）选择符	：after ：before	权重：0001

内联样式权重为1000

若是权重相同，执行后写的样式

类选择器

<标签 class="name"></标签>

css: .name{属性：属性值；}

id选择器

<标签 id="name"></标签>

css：#name{}

一个id名只能出现一次，起名只能用英文且不能用标签和属性起名

伪类选择器

a:link{} 未访问时链接状态，

a:visited{} 已访问时链接状态

e:hover{}鼠标悬停时，元素状态

e:active{}鼠标点击时。元素状态

link和visited是a标签专属，hover和active其他元素也可以使用

1.当四个伪类选择器一起使用的时候，应注意他们的顺序：link visited hover active

通配符

*{属性：属性值}

此标签使用所有的标签，通常用于清除外边距和内填充

*{margin:0;

padding:0;}

群组选择器

语法：选择符1，选择符2...选择符5{属性：属性值；}

多个选择符使用相同的样式，可以使用群组选择符，之间使用“,”

包含选择符

语法：选择器1(父级) 选择器2（子级）{}

<style>

div p{}

</style>

<div><p></p></div>

属性选择器

e:[attr（属性）] 为有attr的元素添加样式

e:[attr=”val”]有attr属性值是”val”的元素添加样式

e:[attr*=”val”]attr属性值含有”val”的元素添加样式

e:[attr^=”val”]attr属性值开头是”val”的元素添加样式

e:[attr$=”val”]attr属性值结尾是”val”的元素添加样式

伪元素（伪对象）选择器

：before；给元素里添加第一个子元素

：after 给元素添加最后一个子元素

e：before{content:"内容";display:block;width: ;height: ;}

e:first-letter给元素中第一个字添加样式（全都适应）

e:first-line给元素第一行添加样式

css是什么和css选择器相关推荐

html中选择样式,html中css三种常见的样式选择器 zz
1:标签选择器标签选择器,是所有带有某种标签的都生效.这里以p为例,也就是所有的带有p标记的都会这样的样式 p{font:"宋体"; color:#FF0000} 我现在表现的是 ...
css的基本操作学习--css样式，选择器，hover，文字属性，文本属性，背景
什么是css? 通配符选择器 <head>/* *通配符选择器匹配任何元素 */*{margin: 0;padding: 0;} </head> css样式有三种一种是内嵌 ...
CSS：基本概念、选择器、伪类伪元素
基本概念 HTML使用结构化标记的理由:易于建立内容索引.增加文档可用性.增加可访问性.易于维护. 元素(element):文档结构的基础,每个元素生成一个框(box)其中包含元素的内容, 元素的两 ...
css 选择href属性值,巧用CSS属性值正则匹配选择器(小技巧)
属性值正则匹配选择器包括下面3种: [attr^="val"] [attr$="val"] [attr*="val"] 这3种属性选择器是字 ...
CSS :before :after 伪类选择器
CSS :before :after 伪类选择器所有主流浏览器都支持 :after 选择器. 注释:对于 IE8 及更早版本中的 :after,必须声明 <!DOCTYPE>. :bef ...
《Two Days DIV + CSS》读书笔记——CSS选择器
1.1.2 CSS选择器 CSS 选择器最基本的有四种:标签选择器.ID 选择器.类选择器.通用选择器. [标签选择器] 一个完整的 HTML 页面由很多不同的标签组成,而标签选择器,则是决定哪些标签 ...
好程序员HTML5前端教程-css的引入方式和选择器
好程序员HTML5前端教程-css的引入方式和选择器 01.引入css方式(重点掌握) 行内样式内接样式外接样式 3.1 链接式 3.1 导入式 css介绍现在的互联网前端分三层: HTML:超 ...
[css] 说说浏览器解析CSS选择器的过程？
[css] 说说浏览器解析CSS选择器的过程? 按照从上到下,从右到左的顺序解析. 个人简介我是歌谣,欢迎和大家一起交流前后端知识.放弃很容易, 但坚持一定很酷.欢迎大家一起讨论主目录与歌谣一起 ...
[css] css中class和id选择器有什么区别？
[css] css中class和id选择器有什么区别? id 在部分浏览器的 js 中会直接生成同名变量: id 的唯一性,获取该 id 的 dom 时,会取同名 id 的前者: id 层叠权重非常高 ...
[css] 为什么说css中能用子代选择器的时候不要用后代选择器？
[css] 为什么说css中能用子代选择器的时候不要用后代选择器? 选择从右到左依次解析匹配,所以后代选择器会去找它的所有父级, 而子代选择器只会选择直接的父级:减少匹配次数,提高效率个人简介我是 ...

css是什么和css选择器

css是什么和css选择器相关推荐

最新文章

热门文章