css选择器以及基础

爱被打了一巴掌 2022-05-18 11:19 212阅读 0赞

css选择器分类：

标签选择器（元素选择器）
    类选择器
    ID选择器
    通配符选择器
    伪类选择器
    伪元素选择器
    派生选择器
    	后代选择器（包含选择器）
    	子元素选择器
    	相邻兄弟选择器
    组合选择器

常用的 ：

标签选择器:（选择器名称为html标签名称）

p{text-indent:3em;}		/*当前的选择器是p*/
    h1{color:red}     	    /*当前的选择器是h1*/

类选择器：  
（定义一类HTML元素的样式。 选择器名称以 . 开始，后面再加上对应元素class属性值）  
HTML页面：对应元素的class值设为类选择器名称

scc页面：选择器名称以 . 开始，后面再加上对应元素class属性值

.给值命名{background-color:#EAEAEA;}  /*注意是用  .   开头！！*/

id选择器：  
（选择器名称以\#开始，后面再加上对应元素的id属性值  
将对应元素的id属性值设为id选择器名称 ）  
HTML页面：

css页面：

#给值命名{background-color:#EAEAEA;}       /*ID名称main前加上一个#号*/

通配符选择器：  
（所以元素！但是这个选择器的优先性很低！！）html里面头部标签里面写就可以了

*{font-size:12px;color:#888}

组合选择器：

多元素选择器:  
同时匹配所以的E元素和F元素，两个元素之间用；号分隔。

p,h1,h2{mergin:0px;}

后代元素选择器:  
匹配所有属于E元素后代的F元素，E和F之间用空格分隔。

#slidebar p{mergin:0px;}

子元素选择器：  
匹配所有的E元素的子元素F。

div>p{mergin:0px;}

相邻兄弟选择器：  
匹配紧接在

元素之后的所有

元素。

div+p{mergin:0px;}

伪类a：  
通过a标签链接。

a：link，a:hover,a:visited,a:active

CSS伪类是用来添加一些选择器的特殊效果  
超链接特殊效果  
a:link \{color:\#FF0000;\} /\* 未访问的链接 */a:visited \{color:\#00FF00;\} /* 已访问的链接 */a:hover \{color:\#FF00FF;\} /* 鼠标划过链接 */a:active \{color:\#0000FF;\} /* 已选中的链接 \*/

提示：a:hover 必须被置于 a:link 和 a:visited 之后，才是有效的。  
a:active 必须被置于 a:hover 之后，才是有效的

伪元素：  
作用于额外元素而不是元素本身，这就是“伪元素”  
:first-letter 首字母  
:first-line 首行  
:before 元素前插入内容  
:after 元素后插入内容

p:before
    	{
    		ontent:"内容为"
    		font-size:16px;
    		font-weight:bold;
    	}

css的继承特性：  
CSS继承性  
HTML文档以树形结构进行组织，各元素之间是一种层次关系，这种层次关系同样反映在样式表的应用中。具有层次关系的元素之间，内层元素将继承外层元素的样式，多个外层元素中定义的样式将叠加到内层元素。  
HTML中，是其他元素的容器，是其他元素的最外层元素，所以元素中定义的样式将影响其他所有元素的显示格式。  
具有继承的CSS属性  
文本相关的属性是继承的  
text-align、color、text-indent、font-family、font-size  
font-style、font-weight、 letter-spacing、word-spacing  
text-transform、line-height等

继承  
通用 0 从低  
标签 1  
类 10  
伪类 10  
ID 100  
行内 1000  
!important 到高

css优先级：  
组合选择器的优先级是如何计算的？  
特指度表示一个css选择器表达式的重要程度，可以通过一个公式来计算出一个数值，数越大，越重要。  
一般而言，选择器指向的越准确，它的优先级就越高。通常我们用1表示标签选择器的优先级，用10表示class选择器的优先级，用100标示ID选择器的优先级，用1000表示行内样式。  
叫做“I-C-E”计算公式  
举例：  
div.box span\{ \} 优先级为12  
.box span\{ \} 优先级为11，优先级小于上边

注意：!important 优先级最高！高于上面的一切！！！\*选择器最低，低于一切！！！

CSS指定URL地址方式：  
body\{background-image:url(bg.jpg)\}  
body\{background-image:url([http://www.lp.cn/im/bg.jpg][http_www.lp.cn_im_bg.jpg])\}  
body\{background-image:url(‘bg.jpg’)\}  
body\{background-image:url(“bg.jpg”)\}

CSS中的颜色值：  
\#rrggbb可以缩写\#rgb  
rgb(x,x,x) 其中x是一个0-255的整数值,如rgb(255,204,0)  
rgb(x%,x%,x%) 其中x是一个0-100的整数值,如rgb(100%,80%,0)

css长度：  
em：  
1em等于默认的字体尺寸，2em等于默认的两倍。  
px：  
计算机上的一个点，像素。

[http_www.lp.cn_im_bg.jpg]: http://www.lp.cn/im/bg.jpg