概念
Cascading Style Sheets 层叠样式表
层叠:多个样式可以作用在同一个html的元素上,同时生效.
好处:1.功能强大
2.将内容展示与样式控制分离
*降低偶尔度(解耦)
*让分工协作更容易
*提高开发效率
使用
CSS与html结合方式(1)内联方式(2)内部样式(3)外部样式,css作用域范围(3)>(2)>(1)
内联方式
在标签内使用style属性指定CSS代码
作用域:当前标签
<div style="color:red;">hello CSS</div>
内部样式
在head标签内,定义style标签,style标签的标签体内容就是css代码
作用域:当前页面中的所有标签
<style>
div{
color:blue;
}
</style>
<div>hello css</div>
外部样式
1.定义CSS资源文件
2.在head标签内,定义link标签,引入外部的资源文件
3.作用域:所有div标签中内容
文件 test.css文件
div{
color:green;
}
<link rel="stylesheet" href="./test.css">
<div>hello css</div>
或者
<style>
@import"./test.css";
</style>
语法
格式:
选择器{
属性名1:属性值1;
属性名2:属性值2;
…
}
*选择器-筛选具有相似特征的元素
*注意:每一对属性需要使用;隔开,最后一对可以不加;
选择器
基本选择器
id选择器
选择具体的id属性值元素.建议在一个html页面中id唯一
语法:#id属性值{ }
<head>
<meta charset="UTF-8">
<title>基础选择器</title>
<style>
#div1{
color: blue;
}
</style>
</head>
<body>
<div id="div1"> 传智播客</div>
</body>
元素选择器
选择具有相同标签名称的元素
语法:标签名称{ }
<head>
<meta charset="UTF-8">
<title>基础选择器</title>
<style>
div{
color: chartreuse;
}
</style>
</head>
<body>
<div>黑马程序员</div>
</body>
类选择器
选择具有相同的class属性值的元素
语法:.class属性值{ }
<head>
<meta charset="UTF-8">
<title>基础选择器</title>
<style>
.cs1{
color: blueviolet;
}
</style>
</head>
<body>
<p class="cs1">传智学院</p>
</body>
注意:基础选择器的优先级:类选择器>元素选择器>id选择器
扩展选择器
选择所有元素
语法:*{ }
并集选择器
语法:选择器1,选择器2{ }
子选择器
筛选选择器1元素下的选择器2元素
语法:选择器1 选择器2{ }
父选择器
筛选选择器2的父元素选择器1
语法:选择器1 >选择器2{ }
属性选择器
选择元素名称,属性名=属性值的元素
语法:元素名称[属性名=“属性值”]{ }
伪类选择器
语法 元素:状态{ }
如 < a >
状态:link-初始化的状态
visited-被访问过的状态
active-正在访问的状态
hover:鼠标悬浮的状态
属性
1.字体,文本
font-size
字体大小
color
文本颜色
test-align
对齐方式
line-height
行高
2.背景
background
3.边框
border
设置边框,复合属性
4.尺寸
width
:宽度
height
:高度
5.盒子模型
margin
外边距
pedding
内边距,默认情况下内边距会影响整个盒子的大小 属性box-sizing:border-box;
设置盒子的属性,让width和height就是最终盒子的大小
float
浮动 left
right
<html lang="en">
<head>
<meta charset="UTF-8">
<title>字体属性</title>
<style>
p{
color: crimson;
font-size: 30px;
text-align: center;
line-height: 200px;
border: 1px solid red;
}
div{
border: 1px solid red;
height: 200px;
width: 200px;
background: url("img/TW.jpg") no-repeat center;
}
</style>
</head>
<body>
<p>Mark</p>
<div></div>
</body>
</html>