一.css概念
1.css的概念:层叠样式表。
2.特征:一处写,处处用。
二、选择器
1. 语法:选择器{属性:属性值}
2. 作用:关联html和css的一个中间枢纽
3. 类型(重点
):
(1)通用选择器 {属性:属性值}
(2)id选择器
2-1.在开始标签写 id=属性值
2-2.在style当中,id找#号,在加属性值
2-3.id选择器具有唯一性.
2-4.!important可以提高属性的级别/
(3)类选择器/class选择器
3-1.在开始标签写 class=属性值
3-2.在style当中,class找.号,在加属性值
3-3.class选择器具有多重性.*/
4. 示例:代码:
<style>
/* 1.通用选择器 * */
*{text-align: center;font-size: 50px;font-family: 宋体;}
p{color: #FF0000;}
/*2. id选择器
#id_p1{font-style: italic;color: #B0B0B0;}
/* 3.class选择器 */
.class_p1{font-size: 30px;text-align: left;}
.class_p2{font-family: 微软雅黑;color: #FFA500;}
</style>
<p id="id_p1">千锤万凿出深山,</p>
<p>烈火焚烧若等闲.</p>
<p class="class_p1 class_p2">粉身碎骨浑不怕,</p>
<p>要留清白在人间.</p>
三、css的三种引入
1.三种引入概念及写法
(1)内联:在标签内部写style标签然后逐一写样式
(2)内部写法:在head标签中先写style标签 然后在逐一写样式
(3)外部:一般把写好的样式放在css文件夹中,通过link外部引入即可
2.执行顺序(权重)
2-1.一般情况下,执行**
就近原则
**
2-2.如果想将某个样式级别提至最高。执行该样式的属性:!important
3.代码:示例
<head>
<meta charset="utf-8">
<title></title>
<!-- link是外部引入css样式的关键词 -->
<link rel="stylesheet" type="text/css" href="../css/public.css"/>
<style>
p{color: red;}
</style>
</head>
<body>
<p>我是段落标签呀!</p>
<font style="color: #ff55ff;font-size: 20px;font-weight: bold;">我是文本标签</font>
<i>我是倾斜标签哈嘿</i>
<style>
b{color:yellow !important;}
</style>
<b style="color: orange !important;">我到底是执行哪个颜色????</b>
</body>
四、块级元素和内联元素
1. 两者之间的转化:
块级:block 内联:inline
(1)块级->内联:display:inline
块级特点:可以设置宽高,独占一行进行显示
(2)内联->块级:display:block
内联特点:排队显示,宽高由内容决定
(3)块级内联:display:inline-block
特点:既可以排队显示,又可以设置宽高
2.代码:示例
<style type="text/css">
#box{
width: 400px;
height: 160px;
border: 1px solid red;
margin: 0 auto;
}
img{
width: 100px;
height:150px;
border: 1px solid red;
}
.box1,.box2{
display: inline-block;
}
</style>
<body>
<div id="box">
<div class="box1">
<img src="img/方世玉.jpg" >
</div>
<div class="box2">
<img src="img/巨鄂.jpg" >
</div>
</div>
</body>
(注:display:inline-block
和display:block
是使用最频繁)