HTML入门(CSS层叠样式表)

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里面的内容。(可以解决父容器塌陷问题)。

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

黎明之道

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值