标题图
Day4:
html和css
规范注意
- 链接里面不能再放链接.
-
a里面可以放入块级元素.
空格规范
选择器与{之间必须包含空格.
如:
.class {}
属性名与之后的:符号之间不允许包含空格, 而:符号与属性值必须包含空格.
如:
font-size: 23px;
选择器的规范
如:
// 并集选择器
.da,
.shu,
.coding {
color: blue;
}
选择器的嵌套层级不大于3级就行.
#da input {}
.shu .coding {}
行高可以让一行文本在盒子中垂直居中对齐,文字的行高等于盒子的高度,行高-上距离-内容高度-下距离.
css三大特性是层叠,继承,优先级.
层叠 继承 优先级
div {
height: 50px;
width: 200px;
background-color: pink;
line-height: 500px;
}
div: {
}
css层叠样式表
css的优先级
- 使用
!important声明的规则 - 使用内嵌声明
- 使用
id选择器 - 使用类选择器,属性选择器,伪元素和伪类选择器
- 使用元素选择器
- 只包含一个通用选择器
- 同一类选择器则遵循就近原则
总结:权重是优先级的算法,层叠是优先级的表现
类选择器的优先级比标签的元素高.
我们在使用css的时候,会出现两个或多个规则在同一元素上,这时css就会出现优先级的情况.
在css中的样式继承权重值是为0的,不管父元素权重多大,被子元素继承时,它的权重都是为0,意思是子元素定义的样式会覆盖继承的样式,行内样式优先.在css中,如果权重相同,css就会遵循就近原则,则是靠近元素最近的样式为最大优先级.
在css中定义了!important命令,这个命令就被赋予最大的优先级.
// 就近原则
div {
color: red;
font-size: 50px;
}
div {
color: blue;
}
<div>达叔</div>
样式冲突,遵循就近原则,样式不冲突,不会层叠.
继承性,子承父业(部分继承,文本属性的继承)
<div class="da">
<p> dd </p>
</div>
div {
color: red;
}
.da {
color: blue;
}
<div class="da">dashucoding</div>
特殊性
继承或者* 的贡献值 |
0,0,0,0 |
|---|---|
| 每个元素（标签）贡献值 | 0,0,0,1 |
| 每个类贡献值 | 0,0,1,0 |
| 每个ID贡献值 | 0,1,0,0 |
| 每个行内样式贡献值 | 1,0,0,0 |
每个!important贡献值 |
∞ 无穷大 |
行内样式 , id , 类 , 标签
#father {
color: red;
}
p {
color: blue;
}
<div id="father">
<p> 大佬 </p>
</div>
// blue
p.c {
color: blue;
}
div p {
color: red;
}
#father {
color: red;
}
<body>
<div id="father" class="cc"
<p class="c"> dashucoding </p>
</div>
</body>
背景
CSS 可以添加背景颜色和背景图片，以及图片设置。
background-color |
背景颜色 |
|---|---|
background-image |
背景图片地址 |
background-repeat |
是否平铺 |
background-position |
背景位置 |
background-attachment |
背景固定还是滚动 |
| 背景的合写（复合属性） | 无 |
background:背景颜色 背景图片地址 背景平铺 背景滚动 背景位置 |
无 |
backgroound-position
语法:
background-position: length
background-position: position
参数:
length: 百分数
position: top | center | right | left | bottom
background:背景颜色,背景图片地址,背景平铺,背景滚动,背景位置.
背景图片
语法：
background-image : none | url (url)
// none : 无背景图（默认的）
// url : 使用绝对或相对地址指定背景图像
如果图片不重复地话，图片覆盖不到的地方都会被背景色填充,如果背景图片平铺，则会覆盖背景颜色。
背景平铺（repeat）
background-repeat : repeat | no-repeat | repeat-x | repeat-y
参数：
-
repeat: 背景图像在纵向和横向上平铺（默认的） -
no-repeat: 背景图像不平铺 -
repeat-x: 背景图像在横向上平铺 -
repeat-y: 背景图像在纵向平铺
设置背景图片时，默认把图片在水平和垂直方向平铺以铺满整个元素。
background-position : length || length
background-position : position || position
参数:
length :
百分数 | 由浮点数字和单位标识符组成的长度值
position :
top | center | bottom | left | center | right
背景附着
语法：
background-attachment : scroll | fixed
参数：
`scroll` : 背景图像是随对象内容滚动
`fixed` : 背景图像固定
背景透明(CSS3)
background: rgba(0,0,0,0.3);
background:
背景颜色 背景图片地址 背景平铺 背景滚动 背景位置
图片效果展示：
···
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Demo</title>
<style>
a {
width: 66px;
height: 33px;
background: url(123.png) no-repeat left top;
display: block;
}
a:hover {
background-position: left bottom;
}
</style>
</head>
<body>
<a href="#"></a>
</body>
</html>
···
引入css样式表
- 内部样式表
- 行内样式
- 外部样式表
// 内部样式表
<head>
<style type="text/CSS">
选择器 {属性1:属性值1; 属性2:属性值2; 属性3:属性值3;}
</style>
</head>
// 行内式(内联样式)
<标签名 style="属性1:属性值1; 属性2:属性值2; 属性3:属性值3;"> 内容 </标签名>
// 外部样式表（外链式）
<head>
<link href="CSS文件的路径" rel="stylesheet" />
</head>
达叔小生：往后余生，唯独有你
You and me, we are family !
90后帅气小伙，良好的开发习惯；独立思考的能力；主动并且善于沟通
简书博客： 达叔小生
https://www.jianshu.com/u/c785ece603d1
结语
- 下面我将继续对 其他知识 深入讲解 ，有兴趣可以继续关注
- 小礼物走一走 or 点赞
网友评论