CSS3

1.什么是CSS      注释快捷键ctrl+\

Cascading style sheets 层叠样式表、级联样式表。简称样式表

2.css的作用

设置HTML网页中元素的样式 

3.HTML与 css的关系 

HTML:负责网页的搭建,内容展示--一个页面骨架

CSS:负责网页的修饰,样式的构建--给网页化妆

4.HTML属性与CSS的使用原则

W3C建议我们尽量使用CSS的方式来取代HTML属性

CSS样式:

a.样式代码高度重用

b.方便后期的维护,提高了可维护性

 

5.css特性

5.1.继承性

大部分的css效果是可以直接被继承的。

必须父子结构(有层级嵌套),子继承父。代码如下:

头部
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge" >
<title>小兰兰</title>
<style>
div{
color:purple;font-size: 40px;
}
</style>
<!-- 引入外部样式 -->
<link rel="stylesheet" href="01.css">
</head>
 
 
 <!--继承性-->
<div>我是爸爸
<p>
我是崽
<span> 我是孙子</span>
<a href="#">我也是孙子</a>
</p>
</div>

5.2.层叠性

 

 

 

 

 

3.优先级

如果多个样式声明冲突,按照样式规划的优先级应用样式

最高:内联样式

最低:浏览器默认样式

4. 调整样式优先级

!important规则-放在属性值之后,与值用空格隔开;作用是调整优先级。 使用之后优先级提升!

// 

<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge" >
<title>小兰兰</title>
<link rel="stylesheet" href="01.css">
<style>
div{color: red;}
div{font-size: 24px;}
h4{color: blue;}
.bg_color{background: yellow;}
.bg_one{color: blue;}
h4.bg_one{color:saddlebrown;}单独给拥有同一属性的h4单独换颜色而不改变有同一属性的值;
</style>
 
</head>
<body>
<div class="bg_one">徐哥是沙雕本雕</div>
<div class="bg_one bg_color">杨哥直男本男</div>
<h4 class="bg_one">小兰是女神本女</h4>
</body>
//
 
 
 
 
 
 

posted on 2019-10-31 14:58  咳咳1122  阅读(85)  评论(0编辑  收藏  举报

导航