文章目录
css 取色方式
- 使用颜色名
不建议在网页中使用颜色名,特别是大规模的使用,避免有些颜色名不被浏览器解析,或者不同浏览器对颜色的解释差异。 - 使用百分比
这是一种最常用的方法,例如:
color: rgb(100%, 100%, 100%);
- 使用数值
数字范围从 0~255,例如:
color: rgb(255, 255, 255);
- 十六进制颜色
这是最常用的取色方法,例如:
color: #ffffff;
其中要在十六进制前面加一个#颜色符号。上面这个声明将显示白色,相反,可以设置#000000为黑色,用 RGB 来描述:
color: #RRGGBB;
从 0~255,实际上十进制的 255 正好等于十六进制的 FF,一个十六进制的颜色值等于 3 组这样的十六进制的值,它们按顺序连接在一起就等于红、蓝、绿3种原色。
css样式类别
内联样式(绝不使用)
内部样式表
将样式编写到head中的style标签里
然后通过cSS的选择器来选中元素并为其设置各种样式
可以同时为多个标签设置样式,并且修改时只需要修改一处即可全部应用
问题:
- 我们的内部样式表只能对一个网页起作用,
- 它里边的样式不能跨页面进行复用
<style >
h1{
color:blue;
}
</style>
h1表示指定的标签
外部样式表(最佳)
为了解决css样式表难以跨页面使用的问题。
可以将css写在一个外部的CSS文件中,意味着只要想使用这些样式的网页都可以对其进行引用
第三种方式(外部样式表) 最佳实践
- 可以将CSS样式编写到一个外部的CSS文件中, 然后通过link标签来引入外部的CSS文件 外部样式表需要通过link标签进行引入,
- 意味着只要想使用这些样式的网页都可以对其进行引用 使样式可以在不同页面之间进行复用
- 将样式编写到外部的Css文件中,可以使用到浏览器的缓存机制, 从而加快网页的加载速度,提高用户的体验。
<link rel="stylesheet" href="./style.css"/>
rel表示样式表
CSS语法
<style>
<h1>style 中不再是html,而是css的格式,这么写是错误的写法</h1>
</style>
<style>
/*
CSS中的注释类似C语言,注释的内容会自动被浏览器忽略
*/
</style>
<style>
/*
CSS基本语法:
1 选择器:p
通过选择器可以选中页面中的指定元素
比如p的作用就是选中页面中所有的p元素
2 声明块:{}
通过声明块指定样式
声明块由一个个声明组成。
声明是一个名值对结构,一个样式名对应一个样式值,名和值之间以:连接,以;结尾,如color:blue;
*/
p{
color:red;
}
</style>
选择器
想选择h1的其中一个作出样式的改变,怎么办
id选择器: #id{}
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>无标题文档</title>
<style>
h1{
color:red;
}
</style>
</head>
<body>
<h1>落霞与孤鹜齐飞</h1>
<h1>秋水共长天一色</h1>
</body>
只想选择h1的其中一个作出样式的改变,怎么办?
id选择器
- 作用:根据元素的id属性值选中一个元素
- 语法: #id属性值{}
- 例子: #box{} #red{}
- 注意:id不能重复,与class作区别
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>无标题文档</title>
<style>
#red{
color:red;
}
</style>
</head>
<body>
<h1>落霞与孤鹜齐飞</h1>
<h1 id="red">秋水共长天一色</h1>
</body>
</html>
class选择器: .class{}
class 是一个标签的属性,它和id类似,不同的是class可以重复使用
可以通过class属性来为元素分组
类选择器
- 作用:根据元素的class属性值选中一组元素
- 语法: .class属性值{}
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>无标题文档</title>
<style>
.blue{
color:blue;
}
</style>
</head>
<body>
<p class="blue">床前明月光</p>
<p class="blue">我是郭德纲</p>
</body>
可以同时为一个元素指定多个class属性,用空格作为分隔 <p class="blue abc">我是郭德纲</p>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>无标题文档</title>
<style>
.blue{
color:blue;
}
.abc{
font-size:50px;
}
</style>
</head>
<body>
<p class="blue">床前明月光</p>
<p class="blue abc">我是郭德纲</p>
</body>
</html>
通配选择器: *{}
通配选择器
作用:选中页面中的所有元素
语法:*
<style>
*{
color:red;
}
</style>
交集选择器(同时满足) :
相同的类,不同的标签 可以通过在 类选择器前+标签名 选定指定的标签。
交集选择器
- 作用:选中同时复合多个条件的元素
- 语法:选择器1选择器2选择器3选择器n{}
- 注意点:交集选择器中如果有元素选择器,必须使用标签选择器开头
如:必须是div.red{} ,不能是.red.div{}
div.blue{}
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>无标题文档</title>
<style>
.blue{
color:blue;
}
div.blue{
font-size:30px;
}
</style>
</head>
<body>
<p class="blue">床前明月光</p>
<div class="blue">我是郭德纲</p>
</body>
</html>
并集选择器(满足其一):
选择器分组(并集选择器)
- 作用:同时选择多 个选择器对应的元素
- 语法:选择器1,选择器2, 选择器3,选择器n{}
div,p{}
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>无标题文档</title>
<style>
div,p{
font-size:30px;
}
</style>
</head>
<body>
<p class="blue">床前明月光</p>
<div class="blue">我是郭德纲</p>
</body>
</html>