目录
一、CSS简介
1、CSS
2、CSS主要作用
3、CSS和HTML区别
二、CSS使用方法(3种):style属性
1、行内嵌入式
由下面举例可知,行内嵌入式只对当前嵌入的表签有效。(不推荐使用,因为此方法失去了样式表的优点。)
2、页面嵌入式
3、导入css文件的方式(外部CSS):推荐使用
三、CSS的选择器:在CSS中定位页面中的标签(控件)
1、简单选择器(基本选择器)
(1)元素选择器(标签名选择器):优先级最低,涉及最广。
(2)类选择器:优先级次之
(3)id选择器:优先级最高
(4)通配符选择器 (通用选择器):*,代表所有元素
(5)分组选择器
一、CSS简介
1、CSS
(1)CSS 是一种描述 HTML 文档样式的语言。
(2)什么是 CSS?
CSS指的是层叠样式表*(CascadingStyleSheets)CSS 描述了如何在屏幕、纸张或其他媒体上显示 HTML 元素CSS节省了大量工作,它可以同时控制多张网页的布局外部样式表存储在CSS 文件中
*:也称级联样式表。
2、CSS主要作用
(1)对页面的外观进行美化
(2)统一网站页面的风格
(3)实现内容和样式的分离,适合团队开发
3、CSS和HTML区别
(1)创建 HTML 的目的是描述网页的内容,通俗来说HTML就是标签
(2)创建CSS的目的是制作网页的样式,CSS就是给标签添加样式
二、CSS使用方法(3种):style属性
1、行内嵌入式
给标签添加style属性,用来设置样式。
可用于为单个元素应用唯一的样式。
由下面举例可知,行内嵌入式只对当前嵌入的表签有效。(不推荐使用,因为此方法失去了样式表的优点。)
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title></head><body><p style="color:blueviolet;font-size:50px">这是一个标题</p><h3 style="color:cornsilk;font-size:100px">只有此元素有的样式</h3></body></html>
2、页面嵌入式
(1)在页面中使用<style></style>定义不同的样式规则
(2)属性继承:明明是父级上设置样式,结果后代标签也跟着发生变化,这就叫属性继承。color属性和font系列属性都可以被继承。
下面举例中body中的属性被body中p标签和h3标签继承,文本位置都居中。
(3)未曾对h3标签进行样式设置,所以它除了继承body的属性,并没有其他属性。
(4) 连接两个属性,用分号隔。
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>body{text-align: center;}p{color: crimson;font-size: large;}</style></head><!-- <style>body{text-align: center;}p{color: crimson;font-size: large;}</style> --><body><p style="color: darkgreen;">文本居中</p><p>设置颜色和字号</p><h3>另一个文本</h3></body></html>
注:页面嵌入式中style属性放在head里和放在head和body之间都可以实现渲染,但是建议放在head中!
(5)style位置对渲染的影响:当同时给head和body都添加style属性时,执行body中的属性。说明body的优先级高于head。如下举例。
3、导入css文件的方式(外部CSS):推荐使用
(1)第一步:创建扩展名为.css的样式文件
第二步:在页面中通过<link>标签将外部的css文件链接起来
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=pp, initial-scale=1.0"><title>css样式</title><link rel="stylesheet" href="../css/test.css"> <!--链接外部的css文件--></head><body><p>你好</p><p>世界</p></body></html>
test.css文件
body{text-align:center;}p {color:crimson;font-size:60px;}
结果:
(2) 外部样式表可以在任何文本编辑器中编写,并且必须以 .css 扩展名保存。
外部 .css 文件不应包含任何 HTML 标签。
(3)注意:请勿在属性值和单位之间添加空格(例如margin-left: 35px;)。正确的写法是:margin-left: 35px;
三、CSS的选择器:在CSS中定位页面中的标签(控件)
1、简单选择器(基本选择器)
(1)元素选择器(标签名选择器):优先级最低,涉及最广。
标签名(可以是一个或多个标签){
样式规则(属性): 值;
}
eg:页面上的所有 <p> 元素都将居中对齐,并带有红色文本颜色:p {text-align: center;color: red;}
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>p{text-align: center;color: darkgreen;}</style></head><body><p>红楼梦</p><!-- <br><br><h4>水浒传</h4><br><br><div>三国演义</div><br><br><span>西游记</span> --></body></html>
(2)类选择器:优先级次之
A、在页面中给标签添加class属性,标签的class属性值可以重复
.类名(标签的class属性值){
样式规则(属性): 值;
}
eg1:所有带有 class="center" 的 HTML 元素将为红色且居中对齐,class为类名。
.center {text-align: center;color: red;}
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>/* p{text-align: center;color: darkgreen;} */.text{color: darkred;font-size: 100px;}</style></head><body><!-- <p>红楼梦</p><br><br> --><h4 class="text">水浒传</h4><br><br><div class="text">三国演义</div><!-- <br><br><span>西游记</span> --></body></html>
B、可以指定只有特定的 HTML 元素会受类的影响。
eg2:下面例子中,只有具有 class="center" 的 <p> 元素为红色且居中对齐:
p.center {text-align: center;color: red;}
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>/* p{text-align: center;color: darkgreen;} */h4.text{color: darkred;font-size: 100px;}</style></head><body><!-- <p>红楼梦</p><br><br> --><h4 class="text">水浒传</h4><br><br><div class="text">三国演义</div><!-- <br><br><span>西游记</span> --></body></html>
C、HTML 元素也可以引用多个类。
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>/* p{text-align: center;color: darkgreen;} */.text{color: darkred;font-size: 100px;}.font{text-align: center;}</style></head><body><!-- <p>红楼梦</p><br><br> --><h4 class="text">水浒传</h4><br><br><div class="text">三国演义</div><div class="text font">两个类</div><!-- <br><br><span>西游记</span> --></body></html>
D、类名不能以数字开头
(3)id选择器:优先级最高
在页面中给标签添加id属性,标签的id属性值不能重复
#id{
样式规则(属性): 值;
}
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>/* p{text-align: center;color: darkgreen;} *//* .text{color: darkred;font-size: 100px;}.font{text-align: center;} */#d1{color: fuchsia;font-size: 150px;}</style></head><body><!-- <p>红楼梦</p><br><br> --><h4 class="text">水浒传</h4><br><br><div class="text">三国演义</div><div class="text font">两个类</div><br><br><span id="d1">西游记</span></body></html>
(4)通配符选择器 (通用选择器):*,代表所有元素
*{
样式规则(属性): 值;
}
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>*{text-align: center;color: blue;}p{text-align: center;color: darkgreen;} .text{color: darkred;font-size: 100px;}.font{text-align: center;}#d1{font-size: 150px;}</style></head><body><p>红楼梦</p><h4 class="text">水浒传</h4><div class="text">三国演义</div><div class="text font">两个类</div><span id="d1">西游记</span></body></html>
通过上面的示例我们还得到了如下结论:
优先级类名影响
id>class>标签名>通配符>默认样式
(5)分组选择器
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>p{text-align: center;color: red;} h4{text-align: center;color: red;}div{text-align: center;color: red;}h3,h1{text-align: center;color:gold;}</style></head><body><p>红楼梦</p><h4 >水浒传</h4><div>三国演义</div><div >两个类</div><br><br><h3>李四</h3><h1>王五</h1></body></html>