什么是 CSS?
- CSS 指层叠样式表 (Cascading Style Sheets)
- 样式定义如何显示 HTML 元素
- 样式通常存储在样式表中
- 把样式添加到 HTML 4.0 中,是为了解决内容与表现分离的问题
- 外部样式表可以极大提高工作效率
- 外部样式表通常存储在 CSS 文件中
- 多个样式定义可层叠为一
使用方法
1.内嵌式
<p style="color: blue; font-size: 32px;"><!--设置p标签里内容为蓝色,字体大小为32像素 -->
这是一段文字
</p>
在p标签里 style= 就是css 对html元素进行美化。color- 颜色 font-size-字体大小
2.内联/内部式
<head>
<title>Document</title>
<!-- 内联/内部式 -->
<style>
</style>
</head>
内部样式是在 html中的head用style{},在{}里对html中的元素进行修改
3.外链式
<title>Document</title>
<!-- 外部样式 -->
<link rel="stylesheet" type="text/css" href="css文件地址">
</head>
外链式也是html的head里用link代码连接css 文件夹,href="" 引号里是css文件所在位置
举个栗子:
在博客测试文件里有css 文件夹以及网页html,而style.css在css文件夹里,那我们在html设置外链的地址就为html文件所在位置里的css文件下style.css
<!DOCTYPE html>
<html lang="en">
<head>
<title>Document</title>
<link rel="stylesheet" href="./css/style.css">
</head>
<body>
</body>
</html>
更多路径问题请移步Wbe前段HTML学习,里面有绝对路径和相对路径的解释和栗子。
CSS选择器
1. 标签选择器:直接用标签名来做选择对其进行更改
<html>
<head>
<title>标签选择器</title>
<style>
p{
color:red; /* p标签里的内容颜色为红色 */
font-size:12px /* p标签里的字体大小为12像素 */
}
div{
height: 150px; /* div标签的高度为150像素 */
width: 150px; /* div标签的宽度为150像素 */
background-color: saddlebrown; /* div标签的背景颜色为暗红 */
}
</style>
</head>
<body>
<p>这是一个p标签</p>
<div>这是一个div标签</div>
</body>
</html
2.类选择器:用class 给标签起名字,用这个名字来做选择对其进行更改,类选择器用"."来对类名进行选择。
<html>
<head>
<title>类选择器</title>
<style>
.font-31{
color:red; /* p标签里的内容颜色为红色 */
font-size:12px /* p标签里的字体大小为12像素 */
}
.font-32{
color:blue;
}
.fon-33{
height: 150px; /* div标签的高度为150像素 */
width: 150px; /* div标签的宽度为150像素 */
background-color: saddlebrown; /* div标签的背景颜色为暗红 */
}
</style>
</head>
<body>
<p class="font-31">这是一个p标签,class名为font-31</p>
<p class="font-31">这是一个p标签,class名为font-31</p>
<p class="font-32">这是一个p标签,class名为font-32</p>
<div class="font-33">这是一个div标签,clas名为font-33</div>
</body>
</html
如上面代码,多个p标签的class名可以相同,选中同一个clss名,可以对用相同class名的标签里的内容进行修改。
3.id选择器:id 选择器可以为标有特定 id 的 HTML 元素指定特定的样式。HTML元素以id属性来设置id选择器,CSS 中 id 选择器以 "#" 来定义。
<!DOCTYPE html>
<html lang="en">
<head>
<title>Document</title>
<style>
#font-20{
width: 300px;/* 设置id名为font-20的宽度为300像素 */
height: 300px;/* 设置id名为font-20的高度为300px */
background-color: chocolate;/* 设置id名为font-20的背景颜色为chocolate */
}
</style>
</head>
<body>
<div id="font-20">这是一个div</div>
</body>
</html>
效果图:
4.通配符选择器:用*对HTML中所有元素进行样式修改
<!DOCTYPE html>
<html lang="en">
<head>
<title>Document</title>
<style>
*{
background-color: cornflowerblue;
}
</style>
</head>
<body>
<div id="font-20">这是一个div</div>
</body>
</html>
效果图:
5.后代选择器:后代选择器用于选取某元素的后代元素,无视层级关系。以下实例选取所有 <p> 元素插入到 <div> 元素中:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Document</title>
<style>
div p{
color: crimson;
font-size: 20px;
}
</style>
</head>
<body>
<div>
<p>在div中</p>
<p>在div中</p>
</div>
<p>不在div中</p>
<p>不在div中</p>
</body>
</html>
效果图:
6.子元素选择器:与后代选择器相比,子元素选择器(Child selectors)只能选择作为某元素直接/一级子元素的元素。以下实例选择了<div>元素中所有直接子元素 <p> :
<!DOCTYPE html>
<html lang="en">
<head>
<title>Document</title>
<style>
div>p{
color: crimson;
font-size: 20px;
}
</style>
</head>
<body>
<div>
<span><p>在div里的span里</p></span>
</div>
<div>
<p>在div里</p>
</div>
<p>不在div里</p>
</body>
</html>
效果图:
7.! important:CSS 中的 !important 规则用于增加样式的权重。!important 与优先级无关,但它与最终的结果直接相关,使用一个 !important 规则时,此声明将覆盖任何其他声明。
没用! important前
<!DOCTYPE html>
<html lang="en">
<head>
<title>Document</title>
<style>
#test2{
color: darkblue;
}
.test{
color: darkgreen;
}
p{
color: crimson;
}
</style>
</head>
<body>
<p>标签选择器</p>
<p class="test">这是class选择器</p>
<p id="test2">这是id选择器</p>
</body>
</html>
效果图:
用!important 后
<!DOCTYPE html>
<html lang="en">
<head>
<title>Document</title>
<style>
#test2{
color: darkblue;
}
.test{
color: darkgreen;
}
p{
color: crimson !important; /* 我在这里加了!important ,所有p标签里的内容都会变为crimson */
}
</style>
</head>
<body>
<p>标签选择器</p>
<p class="test">这是class选择器</p>
<p id="test2">这是id选择器</p>
</body>
</html>
效果图:
8.优先级 -权重
通配标签(*) 0 0 0 0 <标签选择器(p,a.img.div等) 0 0 0 1<类选择器(.) 0 0 1 0<ID选择器(#) 0 1 0 0<内嵌式 1 0 0 0<!important ∞无穷大