HTML入门（CSS层叠样式表）

最新推荐文章于 2022-08-01 16:17:32 发布

黎明之道

最新推荐文章于 2022-08-01 16:17:32 发布

阅读量356

点赞数

分类专栏： HTML 文章标签： css html html5 web js

本文链接：https://blog.csdn.net/sjjsaaaa/article/details/118575779

版权

HTML 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

CSS层叠样式表

A.定义

CSS（Cascading Style Sheets层叠样式表），通俗点将之前的网页元素也叫标签类似于盖房子，css可以将我们之前的标签元素进行美化。美观的界面都离不开CSS进行美化的！

B.CSS样式分类

1.行内样式

<td style="background-color: antiquewhite" ; >张三</td>

将css样式写在标签内部的，叫行内样式。

弊端：css样式和标签未分离，不利于后期的维护。

2.内部样式

<style type="text/css">
    #lisi{ background-color: bisque; color: blue}
</style>

id选择器，找到id=lisi的元素。

优势：实现了css和标签的分离。

劣势：不能多个页面共享css 样式 ——>外部css。

3.外部样式【常用】

#lisi{ background-color: bisque; color: blue}

<link rel="stylesheet" href="sty.css">

引用外部css样式。

优点：实现了样式和标签完全分离利于后期的维护，并且多个页面可以共享css，推荐使用！

样式优先级：

就近原则，行内样式>内部样式>外部样式

C.选择器

选择器的作用就是通过不同的选择器找到需要设置css样式的元素，在进行css美化。

选择器优先级：

id选择器>类选择器>标签选择器

D.选择器分类

一.基本选择器

1.id选择器

找到id=lisi，通常给一个标签设置样式的时候使用。

#lisi{ 
	background-color: bisque; color: blue
}

2.类选择器

找到class=zhangsan的元素，通常给多个元素设置同一种样式的时候使用。

.zhangsan{
    background-color: azure;
}

3.标签选择器

找到指定的标签，通常给指定标签设置样式的时候使用。

h1{ background-color: blue}

<h1>zheli</h1>

4.全局选择器

找到所有的标签元素设置样式。

*{
    background-color: blanchedalmond;
}

5.复合选择器（交集选择器）

两个条件都要满足，一般第一个条件是标签名称，找到class=cal的h1 标签。

h1.cal{
    background-color: blue;
}

<h1 class="cal">sjdiasjd</h1>

6.并集选择器

多个选择器使用同一种样式。

 #wo,hi.cal,p{
 	 color: blue;	
 }

二.关系选择器

<body>
<a href="#">和p标签同级下的都属于兄弟元素</a>
<p>
    <a href="#">p标签里面的a链接</a>
    <strong>这是一个帅气的<a href="#">程序员</a></strong>
</p>
<a href="#">p标签以外的a链接</a>
<a href="#">p标签以外的a链接</a>

1.后代选择器

找到p里面的所有a 标签。

p a{ color: blue}

2.子选择器

找到p标签下的子元素a。

p>a{color: azure}

3.相邻选择器

找到p后面紧挨着的a 标签。

p+a{background-color: blueviolet}

4.兄弟选择器

找到p标签后面平级的a。

p~a{color: bisque}

三.属性选择器

[class]{color:#f00;}

找到有class属性的元素。

p[class]{color:#f00;}

找到class属性的p标签。

p[class=‘sd']{color:#f00;}

找到class属性并且值为sd的p标签。

a[class~="external"]{color:#f00;}

<li><a href="?" class="external txt">外部链接</a></li>

选择具有class属性且属性值为一用空格分隔的字词列表，其中一个等于external的E元素。

li[class^="a"]{color:#f00;}

	<li class="abc">列表项目</li>
	<li class="acb">列表项目</li>
	<li class="cab">列表项目</li>

选择具有class属性且属性值为以a开头的字符串的li元素。

img[src$='jpg']{backgroud-color: green;}

img src="images/hetao.jpg">

找到src属性以jpg结尾的Img标签。

[class|='mr']{backgroud-color: green;}

<p class="mr-giao">齐整整的篱笆院</p>

找到class属性是以mr开头的并是以-分割的元素。

四.伪类选择器

1.通过伪类选择器设置超链接样式

超链接的四种状态

<!--a链接未访问时状态-->
a:link {}
/*a链接访问过后*/
a:visited{}
/*a链接单机时的状态*/
a:active{}
/*a链接悬停时的状态*/
a:hover{}

鼠标悬停时添加图片边框

img:hover{border: 1px solid red}
<img src="../DAY1/images/hetao.jpg" >

2.其他伪类选择器

ul li:first-child{color: #0033cc}
ul li:last-child{color: red}
ul li:nth-child(2){color: antiquewhite}
ul li:only-child{color: aqua}
ul li:nth-last-child(2){color: antiquewhite}
<ul>
    <li>结构性伪类选择符 E:only-child</li>
</ul>
<h1>有多个子元素</h1>
<ul>
    <li>结构性伪类选择符 E:first-child</li>
    <li>结构性伪类选择符 E:first-child</li>
    <li>结构性伪类选择符 E:first-child</li>
    <li>结构性伪类选择符 E:first-child</li>
</ul>

first-child：ul下的第一个子元素li。

last-child：ul下的最后一个子元素li。

nth-child：ul下的括号中的第几个子元素li。

only-child：找到ul下中只有唯一一个子元素li。

nth-last-child(2)：匹配父元素的倒数第2个子元素。

ul>li:first-of-type{background-color: #0033cc}

按类型找到第一个li。

p:empty{height: 10px;background-color: red}

<p><!--我是一个空节点p，请注意我与其它非空节点p的外观有什么不一样--></p>
<p>结构性伪类选择符 E:empty</p>

找到子元素是空的p，没有子元素和文本。

ul>li:not(:nth-child(3)){color: #0033cc}

not取反，排除掉第三个li元素。

五.伪对象选择器

p::first-letter{color: red}
<p>woheni</p>

选择到[标签里第一个字符，第一个字符修改样式。

p::selection{background-color: #0033cc}

p标签被鼠标选中的部分为蓝色，修改鼠标选中的部分样式。

p::after{content: '标签后面添加此内容'}

在p标签后面添加content里面的内容。（可以解决父容器塌陷问题）。