标签:tab 标准 位置 inline 特殊情况 通过 作用 颜色 jin
CSS选择器分为基础选择器和复合选择器,基础选择器不能满足实际开发中,快速高效的选择标签,复合选择器特点:
后代选择器:又称包含选择器,用来选择元素或元素组的子孙后代
/*类选择器 标签选择器(若干) {
属性: 属性值;
...
}*/
.nav a {
color: red;
}
.avengers ul li {
font-size: 24px;
}
/*父级标签>子级标签 {属性名: 属性值;...}*/
div>strong {
color: red;
}
父级标签在前,子级标签在后,中间用
>
连接
<div>
<strong>子代</strong>
<strong>子代</strong>
<strong>子代</strong>
</div>
<div>
<p>
<strong>孙代</strong>
<strong>孙代</strong>
<strong>孙代</strong>
</p>
</div>
上面代码中,如果使用写法中的CSS,选中的标签为
子代
所在标签,也就是说子代
的文字颜色会变红
交集选择器代表着“既是...又是...”的关系
让下面代码中第一行为红色
<p class="red">红色</p>
<div class="red">红色</div>
<p>蓝色</p>
在style
标签中使用交集选择器
/*在这里表示,既是p标签,又是red类*/
p.red {
color: red;
}
/*语法:[标签选择器][类选择器] {属性名: 属性值;...}*/
交集选择器用的较少,记住即可
如果某些选择器定义的样式相同,那么我们可以使用并集选择器
并集选择器是各个选择器通过,
连接,用于集体声明
<p>要想练就绝世武功</p>
<p>就要忍受常人难忍受的痛</p>
<span>师傅喜欢喝的茶叫做乌龙</span>
<span>衣服爱穿中国红(嘿 师傅)</span>
<div>无论是炎夏或寒冬</div>
<div>我都很向往山门外的天空</div>
<h3 class="red">还在南方等我 下山的我</h3>
<h3>的人叫小落</h3>
在style
标签中可以这么写
<style>
/*并集选择器用逗号隔开,代表 “和”的意思,通常用于集体声明*/
p,
div,
.red {
color: red;
}
</style>
.demo {}
:demo {}
作用:
伪类选择器有很多种,比如链接伪类,结构伪类,在此,先介绍链接伪类
链接伪类选择器 | 链接的状态 |
---|---|
a:link | 未访问链接 |
a:visited | 已访问链接 |
a:hover | 鼠标移动到链接上 |
a:active | 选定的链接 |
使用:可以用下面代码做一个简单尝试
a:link {
color: #333333;
text-decoration: none;
}
a:visited {
color: gray;
}
a:hover {
color: red;
}
/*点击鼠标,不松开*/
a:active {
color: blue;
}
<a href="https://www.jd.com">京东</a>
a
标签,浏览器有默认的样式,所以我们改变样式时,需要给链接单独指定,父标签样式无效a { /* a是标签选择器 所有的链接 */
font-weight: 700;
font-size: 16px;
color: gray;
}
a:hover { /* :hover 是链接伪类选择器 鼠标经过 */
color: red; /* 鼠标经过的时候,由原来的 灰色 变成了红色 */
}
div
中的a
具有效果,而外面的京东
无效 <div class="nav">
<a href="#">百度一下,你就知道</a>
</div>
<a href="https://www.jd.com">京东</a>
释义:标签以什么方式进行展示,比如div
独占一行,span
一行可以放很多
标签的类型:
HTML分为块标签和行内标签两种类型,也叫块元素和行内元素
常见的块元素有<h1>~<h6>、<p>、<div>、<ul>、<ol>、<li>等,其中<div>标签是最典型的块元素。
块级元素特点
注意:
p
不能放div
h1~h6,dt
,他们都是文字类块级标签,里面不能放其他块级元素。常见的行内元素有<a>、<strong>、<b>、<em>、<i>、<del>、<s>、<ins>、<u>、<span>等,其中<span>标签最典型的行内元素。有的地方也成内联元素
行内元素特点
注意:
a
可以放块级元素,但是给a
转换成块级模式更安全在行内元素中有几个特殊的标签——<img />、<input />、<td>,可以对它们设置宽高和对齐属性
div {
display:inline;
}
测量方法:
行高我们利用最多的一个地方是: 可以让单行文本在盒子中垂直居中对齐。
文字的行高等于盒子的高度。
行高 = 上距离 + 内容高度 + 下距离
行高和高度的三种关系:
关系 | 效果 |
---|---|
相等 | 文字垂直居中 |
大于 | 文字 偏下 |
小于 | 文字 偏上 |
a {
background-color: gray;
}
a {
background-image: url(images/3.jpg);
}
url
a {
/*不平铺*/
background-repeat: no-repeat;
/*沿x轴平铺*/
background-repeat: repeat-x;
/*沿y轴平铺*/
background-repeat: repeat-y;
/*平铺*/
background-repeat: repeat;
}
background-position : length || length
background-position: 14px 22px;
background-position : position || position
background-position: right center;
参数 | 值 |
---|---|
length | 百分数 | 由浮点数字和单位标识符组成的长度值 |
position | top | center | bottom | left | center | right 方位名词 |
简单理解就是背景是否可以滚动
background-attachment : scroll | fixed
参数 | 作用 |
---|---|
scroll | 背景图像是随对象内容滚动 |
fixed | 背景图像固定 |
background: transparent url(image.jpg) repeat-y scroll center top ;
background: rgba(0, 0, 0, 0.3);
CSS层叠性是指多种CSS样式的叠加,如果一个属性通过两个相同的选择器设置到同一个元素上,那么,这时候写在后面选择器的属性就会将上一个选择器的属性层叠掉
下面的代码通过CSS控制后,显示什么颜色?
<div class="nav">
<p>长江后浪推前浪,前浪死在沙滩上</p>
</div>
CSS代码
p {
color: cyan;
}
p {
color: red;
}
答案:红色
子标签会继承父标签的某些样式,如文字颜色和字号。
<!DOCTYPE html>
<html>
<head>
<title>CSS继承性</title>
<style>
div {
color: red;
}
</style>
</head>
<body>
<div>
<p>这里是儿子</p>
</div>
</body>
</html>
“这里是儿子”显示为红色
定义CSS样式时,经常出现两个或更多规则应用在同一元素上,此时,
标签选择器 | 计算权重公式 |
---|---|
继承或者 * | 0,0,0,0 |
每个元素(标签选择器) | 0,0,0,1 |
每个类,伪类 | 0,0,1,0 |
每个ID | 0,1,0,0 |
每个行内样式 style="" | 1,0,0,0 |
每个!important 重要的 | ∞ 无穷大 |
div {
color: pink!important;
}
我们经常用交集选择器,后代选择器等,是有多个基础选择器组合而成,那么此时,就会出现权重叠加。
注意:数位之间没有进制 比如说: 0,0,0,5 + 0,0,0,5 =0,0,0,10 而不是 0,0, 1, 0, 所以不会存在10个div能赶上一个类选择器的情况。
权重相同,则使用就近原则
/*这是一个css注释*/
/*记住注释这么写*/
/* 注释内容 */
标签:tab 标准 位置 inline 特殊情况 通过 作用 颜色 jin
原文地址:https://www.cnblogs.com/fireday/p/2css-er.html