目录
CSS简介
定义
CSS (Cascading Style Sheets,层叠样式表),是一种用来为结构化文档(如 HTML 文档或 XML 应用)添加样式(字体、间距和颜色等)的计算机语言,CSS 文件扩展名为 .css。样式定义如何显示HTML元素,样式通常存储在样式表中。
作用
给页面中的HTML标签设置样式。
CSS的三种引入方式
行内样式
<!--
1.行内样式------写在标签的style属性中
-->
<h1 style="color:red ; font-size: 50px ;">标题</h1>
<h1>标题</h1>
<h1>标题</h1>
内嵌样式
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<!--
2.内部(内嵌样式)
-->
<style>
h1{
color: #f00;
font-size: 100px;
}
</style>
</head>
<body>
<h1>标题</h1>
</body>
</html>
外联样式
<link rel="stylesheet" href="../css/reset.css">
<link rel="stylesheet" href="../css/index.css">
css的基本选择器
标签选择器
(1)html标签名称{样式属性}
(2)对同类标签有效
/*
标签选择器
div {
color: #f00;
font-size: 60px;
font-weight: bold;
}
*/
类选择器
(1).类名称{样式属性}
(2)对类名一致的标签元素有效
/*
类选择器
.title {
color: #f00;
font-size: 60px;
font-weight: bold;
}
*/
id选择器
(1)#id名称{样式属性}
(2)对指定的id名称的标签元素有效
/* id选择器 */
#title {
color: #f00;
font-size: 60px;
font-weight: bold;
text-align: center;
}
通用选择器
(1)*{样式属性}
(2)对当前页面中所有标签元素有效
权重优先级
由上到下,由外到内。优先级从低到高(就近原则)。
css的复合选择器
后代选择器
/* 后代选择器 */
ul li {
color: #f00;
}
子代选择器
/*
子代选择器----直接子元素
.list>li {
border: 1px solid #f00;
}
*/
并集选择器
/* 并集选择器----对使用当前css样式的所有选择器有效 */
.list>li,
p{
border: 1px solid #f00;
}
hover伪类选择器
/*
:hover伪类选择器
.list li:hover {
background-color: blue;
font-size: 20px;
}
*/
css的文本属性样式
字体颜色color
三种表示字体颜色的方法
①16进制表示方法 ;
②英文单词;
③rgb三原色。
字体大小font-size
字体大小font-size
①绝对像素单位px;
②相对单位em----相对父元素变化;
③相对rem----相对于html根标签变化。