学习笔记,仅供参考,有错必纠
CSS
CSS语法
由上图可知,CSS语法由选择器, 属性声明, 花括号, 冒号, 分号组成,且css对换行和空格不敏感。
比如:
p {
color: green; /*设置前景色,也就字体的颜色为绿色*/
background-color: red;/*设置背景色为红色*/
}
CSS简单属性
- 常用属性
属性 | 含义 |
---|---|
width | 设置宽度,单位px像素 |
height | 高度 |
color | 前景色(文字颜色) |
background-color | 背景色 |
font-size | 字体大小 |
- 举个例子
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>CSS属性</title>
<style>
div {
width: 200px;
height: 200px;
background-color: yellow;
color: red;
}
</style>
</head>
<body>
<div>
俺是div标签
</div>
</body>
</html>
页面:
CSS注释
语法:
/*单行注释*/
/*
多行注释
*/
注意,注释不能嵌套。
CSS选择器
通配符选择器
通配符选择器用*
星号表示,他是所有选择器中作用范围最广的,能匹配页面中所有的元素,其基本语法格式如下:
* {
属性1: 属性值1;
属性2: 属性值2;
}
例如:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>选择器</title>
<style>
* {
margin: 0; /*外边距*/
padding: 0; /*内边距*/
color: green;
}
</style>
</head>
<body>
<h1>通配符选择器</h1>
<p>
欢迎光临!
</p>
<span>OK!</span>
</body>
</html>
页面:
- 注意事项
通配符的穿透能力很强,优先级高于继承的样式,会覆盖继承的样式。
ID选择器
ID选择器,可以帮助我们选择当前页面中唯一的id值的标签,也就是根据标签的id属性值进行选取,进而设置样式。ID选择器的符号用#
井号表示
如果我们的页面中有两个p标签,我想设置上面一个标签的像素为30px,下面一个p标签的像素为10px,那么我们可以通过设置标签id
+标签选择器
的方式实现,例如:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>选择器</title>
<style>
#p1 {
font-size: 30px;
}
#p2 {
font-size: 10px;
}
</style>
</head>
<body>
<h1>ID选择器</h1>
<p id="p1">
我是第1个p标签
</p>
<p id="p2">
我是第2个p标签
</p>
</body>
</html>
页面:
- ID选择器的命名规范
- 只允许出现字母(大小写严格区分),数字,下划线
- 只允许以字母开头
- 命名没有长度限制,但不能太长
- 不允许出现标签名
类选择器
类选择器,是对HTML标签中class属性进行选择。css类选择器的选择符为.
,例如:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>选择器</title>
<style>
.Web {
color: green;
font-size: 20px;
}
</style>
</head>
<body>
<h1>类选择器</h1>
<p class="Web">
我是第1个p标签
</p>
<p>
我是第2个p标签
</p>
<p class="Web">
我是第3个p标签
</p>
<ul>
<li>小黄</li>
<li class="Web">小白</li>
<li>小黑</li>
</ul>
</body>
</html>
页面:
标签可以的class属性可以包含多个值,这些值在class标签中用空格隔开:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>选择器</title>
<style>
.Web {
color: green;
font-size: 20px;
}
.data {
background-color: yellow;
}
</style>
</head>
<body>
<h1>类选择器</h1>
<p class="Web">
我是第1个p标签
</p>
<p class="data">
我是第2个p标签
</p>
<ul>
<li>小黄</li>
<li class="Web data">小白</li>
<li>小黑</li>
</ul>
</body>
</html>
页面:
- ID选择器和类选择器的区别
相同的class属性值,可以在HTML页面中出现多次,而ID属性值,则只能在HTML页面中出现一次;
一个class属性可以有多个值,也就是说一个标签可以有多个class值;
建议大家可以多实用类选择器(不是我建议的)。
CSS复合选择器
复合选择器是由两个或多个基础选择器,通过不同的方式组合而成的,详情见下面的知识点。
标签指定式选择器(既…又…)
标签指定式选择器又称交集选择器,由两个选择器构成,其中第一个为标记选择器,第二个为class选择器或者id选择器,两个选择器之间不能有空格,例如:
- 举个例子
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>选择器</title>
<style>
p.Web {
color: green;
font-size: 20px;
}
</style>
</head>
<body>
<h1>复合选择器</h1>
<p class="Web">
我是第1个p标签
</p>
<p class="data">
我是第2个p标签
</p>
<ul>
<li>小黄</li>
<li class="Web">小白</li>
<li>小黑</li>
</ul>
</body>
</html>
页面:
后代选择器(包含选择器)
后代选择器用来选择元素或元素组的后代,其写法就是把外层标记写在前面,内层标记写在后面,中间用空格分隔。当标记发生嵌套时,内层标记就成为外层标记的后代,例如:
- 举个例子
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>选择器</title>
<style>
.box li {
color: green;
font-size: 20px;
}
div a {
background-color: yellow;
}
</style>
</head>
<body>
<h1>复合选择器</h1>
<div class="box">
<ul>
<li>小黄</li>
<li>小黑</li>
<li>小白</li>
</ul>
<ul>
<li>北京</li>
<li>上海</li>
</ul>
<p>
俺是p标签
</p>
</div>
<div>
<ul>
<li>AAA</li>
<li>BBB</li>
<li>CCC</li>
</ul>
<a href="#">俺是a标签</a>
</div>
</body>
</html>
页面:
并集选择器
并集选择器是各个选择器通过逗号连接而成的,任何形式的选择器(包括标记选择器、class类选择器、id选择器等),都可以作为并集选择器的一部分,如果某些选择器定义的样式完全相同,或部分相同,就可以利用并集选择器为它们定义相同的CSS样式,例如:
- 举个例子
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>选择器</title>
<style>
p, h2, span {
background-color: yellow;
color: red;
}
</style>
</head>
<body>
<h1>复合选择器</h1>
<p>
俺是p1
</p>
<h2>俺是h2</h2>
<span>俺是span</span>
<ul>
<li>小白</li>
<li>小黑</li>
<li>小黄</li>
</ul>
</body>
</html>
页面:
子元素选择器
子元素选择器,是让选择器只能选择儿子辈的元素,而不会选择孙子辈的元素。例如:
h1>strong { color: red; }
- 举个例子
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>选择器</title>
<style>
div>p {
background-color: yellow;
color: red;
}
</style>
</head>
<body>
<h1>复合选择器</h1>
<div>
<p>俺是p1</p>
<p>俺是p2</p>
<p>俺是p3</p>
<ul>
<li><p>俺是列表里的p1</p></li>
<li><p>俺是列表里的p2</p></li>
<li><p>俺是列表里的p3</p></li>
</ul>
</div>
<p>俺是P</p>
</body>
</html>
页面:
属性选择器
- 举个例子
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>选择器</title>
<style>
h2[id] { color: red; }
/*把同时拥有id和class属性的h2标题选出来然后设置字体大小为30px*/
h2[id][class] { font-size: 50px; }
input[type="text"] { background-color: purple; }
input[type="password"][class*="know"] { background-color: yellow; }
</style>
</head>
<body>
<h1>属性选择器</h1>
<h2 id="aside-title">俺是一直小白兔</h2>
<h2 id="aside-title" class="aside-msg">爱吃提草和兔粮</h2>
<input type="text" class="whoknow">
<input type="password" class="whocare">
<input type="password" class="whoknow">
</body>
</html>
页面: