1.1 行内样式
也称为内联样式
直接在标签中编写样式,通过使用标签内部的style属性;
一般在测试的时候使用居多:
语法:
<html标签 style="样式1:值1;样式2:值2;....样式N:值N;">hello my css</html标签>
案例:
<div style="color: red;">hello my css</div>
弊端:只能对当前的标签生效,没有做到内容和样式相分离,耦合度太高。
1.2 内部样式
定义在head标签内,通过style标签,该标签内容就是CSS代码
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>内部样式</title>
<style>
div{
color: red;
}
</style>
</head>
<body>
<div>hello my css</div>
</body>
</html>
1.3 外部样式
1、提前定义css资源文件
2、在head标签内,定义link标签引入外部样式文件
lina.css文件,放在与html页面同级的css文件夹中:
div {
color: red;
}
html页面中的引入
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>外部样式</title>
<link rel="stylesheet" href="css/lina.css" />
</head>
<body>
<div>hello my css</div>
</body>
</html>
作用域的范围:外部样式表>内部样式表>行内样式表
优先级:外部样式表<内部样式表<行内样式表;
同样的样式作用在同一个标签身上:就近原则;不同样式作用在同一个标签身上:叠加生效。
2.基本选择器:筛选具有相似特征的元素
2.1 id选择器
选择具有相同id属性值的元素,建议html页面中的id值唯一
id 选择器可以为标有特定 id 的 HTML 元素指定特定的样式。
HTML元素以id属性来设置id选择器,CSS 中 id 选择器以 "#" 来定义。
PS: ID属性不要以数字开头,数字开头的ID在 Mozilla/Firefox 浏览器中不起作用。
虽然多个元素可以使用同一个id选择器控制样式,但是不推荐。如果需要同样的样式对多个标签生效,使用class选择器。
<style>
/*ID选择器*/
/*class选择器:通过html标签中的class属性应用生效 */
#myDiv{
color: red;
}
</style>
<body>
<div id="myDiv">有id=myDiv</div>
</body>
2.2 class选择器
选择具有相同的class属性值的元素
class 选择器用于描述一组元素的样式,class 选择器有别于id选择器,class可以在多个元素中使用。
class 选择器在HTML中以class属性表示, 在 CSS 中,类选择器以一个点"."号显示:
PS:类名的第一个字符不能使用数字!它无法在 Mozilla 或 Firefox 中起作用。
/*class选择器:通过html标签中的class属性应用生效 class=buleColor*/
.blueColor{
color: blue;
}
<body>
<div class="blueColor">类选择器</div>
</body>
3.3 元素选择器/标签选择器
选择具有相同标签名称的元素。
定义选择器语法:标签名称{};PS:标签名称必须是html提供好的标签。
使用标签选择器:自动使用在所有的同名的标签上
/*标签选择器:直接在同名的html标签上生效*/
p{
color: gold;
}
<body>
<p>标签选择器</p>
<p>标签选择器</p>
<p>标签选择器</p>
</body>
选择器的优先级
ID选择器 > 类选择器 > 标签选择器
当多个选择器作用在同一个标签上的时候,如果属性冲突,看优先级;如果不冲突,样式叠加生效。
样式表的优先级
行内样式 > 内部样式 >外部样式
同样,三个样式表中都有内容作用在同一个html标签的时候,如果属性冲突,看优先级;如果不冲突,样式叠加生效
3.CSS常用样式
3.1 color :字体颜色
跟颜色相关的取值分3种:
1、颜色的单词 red blue...
2、rgb(红,绿,蓝)三色的取值范围是0-255 rgb(255,0,0)
rgba(红,绿,蓝,透明度),透明度取值:0-1 0 全透明 1-不透明 0.5 半透明rgba(255,0,0,0.4)
3、#值1值2值3 :值的范式是00-FF 十六进制数字组成的 例如:#FF0000
3.2 width height:宽高
PS:只有块状元素可以设置宽高,行级元素设置不生效。
取值方式有2种:
1:数值 绝对数字 单位是像素PX
2:百分比:占据父元素的比例
3.3 背景样式
.bj{
width: 400px;
height: 300px;
/*背景色*/
/*background-color: lightblue;*/
/*背景图和平铺方式*/
background-image: url(img/王冰冰.jpg);
background-repeat: no-repeat;
background-position: -20px -30px;
background: lightblue url(img/王冰冰.jpg) no-repeat 20px 30px;
}
4.4 文本样式
.f{
font-size: 28px;//字体大小
font-family: "黑体";//字体类型
font-weight: bold;//加粗
font: bold 24px 微软雅黑;
text-decoration: none;
text-align: center;//文本居中
height: 50px;
line-height: 50px;//行号和高度保持一致,=垂直居中
letter-spacing: 20px;//文字之间的间隙
}
4.5 列表样式
li{
background-color:lemonchiffon ;
/*列表样式:常用取值:none-无样式 square-正方形 circle-空心圆 decimal-数字*/
list-style-type: square;
/*列表样式为自定义图片*/
list-style-image: url(img/b.png);
/*列表的样式放置的位置*/
list-style-position: outside;
list-style: square url(img/b.png) inside;
/*常用的列表样式*/
list-style: none;
}
4.6 边框样式
.myDiv{
width: 400px;
height: 200px;
background-color: lemonchiffon;
border-style: solid;//边框样式
border-width: 2px;/*边框线的宽度*/
border-color: red;
/*边框缩写:样式,颜色,宽度*/
border: solid red 3px;
/*边框可以分为4个方向分别设置*/
border-top:dashed black 4px;
bottom,left,right
/*常用的细边框样式*/
border:solid 1px #ccc
}
5.盒子模型
5.1 概念
所有HTML元素可以看作盒子,在CSS中,"box model"这一术语是用来设计和布局时使用。
CSS盒模型本质上是一个盒子,封装周围的HTML元素,它包括:边距,边框,填充,和实际内容。
盒模型允许我们在其它元素和周围元素边框之间的空间放置元素。
盒子模型说明图:
-
Margin(外边距) - 清除边框外的区域,外边距是透明的。
-
Border(边框) - 围绕在内边距和内容外的边框。
-
Padding(内边距) - 清除内容周围的区域,内边距是透明的。
-
Content(内容) - 盒子的内容,显示文本和图像。
5.2 盒子的宽度和高度
6 补充常用样式
6.1 float 浮动
6.1.1 什么是浮动
CSS 的 Float(浮动),会使元素向左或向右移动,其周围的元素也会重新排列。
Float(浮动),往往是用于图像,但它在布局时一样非常有用。
12.1.2 元素怎样浮动
元素的水平方向浮动,意味着元素只能左右移动而不能上下移动。
一个浮动元素会尽量向左或向右移动,直到它的外边缘碰到包含框或另一个浮动框的边框为止。
浮动元素之后的元素将围绕它。
浮动元素之前的元素将不会受到影响。
12.1.3 彼此相邻的浮动元素
如果你把几个浮动的元素放到一起,如果有空间的话,它们将彼此相邻。
12.1.4 clear--清除浮动
元素浮动之后,周围的元素会重新排列,为了避免这种情况,使用 clear 属性。
clear 属性指定元素两侧不能出现浮动元素。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>浮动</title>
<style>
div{
width: 400px;
height: 200px;
margin-bottom: 10px;
}
</style>
</head>
<body>
<!--没有浮动属性的元素都属于常规文档流:从上往下从左往右依次显示
浮动的元素都脱离了常规文档流;
为了好理解:大家可以认为浮动元素属于一层,非浮动元素属于一层
如果想要非浮动元素不受浮动元素的影响,需要使用clear属性
-->
<div style="background: rgba(255,0,0,0.5); float: left;">
div1-左浮动,脱离常规文档流,紧贴父元素或者上一个同方向浮动
</div>
<div style="background: lawngreen; width: 600px; height: 350px; ">
div2-未浮动,常规文档流,
<br/>PS:此时div1在div2的上方显示,因为div1和div2是不同文档流中的元素,显示互不影响
如果不想让div2被浮动元素影响,需要添加clear属性。
添加clear: left;之后div2就会忽略div1浮动的影响,在div1层后面显示,不会重叠了,大家可以自己试验一下
</div>
<div style="background: lightblue; float: right; width: 1800px;">
div3-右浮动,脱离常规文档流,紧贴父元素或者上一个同方向浮动
</div>
<div style="background: lightcoral; width: 600px; height: 350px; ">
div4-未浮动,常规文档流,
<br/>PS:此时div3在div4的上方显示,因为div3和div4是不同文档流中的元素,显示互不影响
如果不想让div4被浮动元素影响,需要添加clear属性。
添加clear: right;之后div4就会忽略div3浮动的影响,在div3层后面显示,不会重叠了,大家可以自己试验一下
clear属性有三个取值:left、right、both;分别是取出左浮动、有浮动和所有浮动元素的影响
</div>
<div style="background: lavender;">
div5-未浮动,常规文档流,
</div>
</body>
</html>