一、css基础
1、 什么是css
css又叫样式表（层叠样式表），是web标准中的表现标准，专门用来针对网页中内容的布局和样式
现在大部分使用css3
2、怎么写css
1）语法
选择器{属性1：属性值1；属性2：属性值2}
2）说明
选择器 ：选中需要设置样式的标签；在内联样式表中选择可以省略
{} -- 固定写法
属性 -- 属性是以“属性：属性值”的形式成对出现，多个属性之间用分号隔开
值 -- 如果是数字表示大小，数字后边必须加单位：px（像素），em（空格数）
颜色值：颜色的英文单词、#十六进制颜色值、rgb（r，g，b）、rgba（r，g，b，透明度）
rgb颜色：r-red（0-255），g-green（0-255），b-blue（0-255)
rgb(255,0,0) == #ff0000 == red
rgb(0,155,0) == #00ff00 == "green"
rgb(0,0,0) == #000000 == "black"
rgb(255,255,255) == #ffffff == "white"
透明度 -- 0（透明）~1（不透明）
3、写在哪儿
1）内联样式表：将样式写在标签的style属性中
只作用于一个固定的标签
2）内部样式表：将样式写在style标签中
作用于当前html中的标签
3）外部样式表：将样式写在css文件中，然后在html中通过link标签导入
可以作用于所有html中的所有标签
复用性：外部>内部>内联（反复使用的次数）
优先级：内联样式表的优先级不管什么情况都是最高的
内部和外部的优先级看顺序，谁后写优先级高
4、常见属性
color -- 设置标签中的字体颜色
background-color -- 设置标签的背景颜色
font-size -- 字体大小
width -- 标签宽度
height -- 标签高度
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<!--
2、内部样式
-->
<style type="text/css">
/*这个里面是写在css代码*/
div{color: orange;background: yellowgreen;
}
h1{color: peru;
}
</style>
<link rel="stylesheet" type="text/css" href="css/01-test1.css" />
</head>
<body>
<!--
1、内联样式表
-->
<p style="color: red; font-size: 50px;">hello css</p>
<h1>我是h1</h1>
<div>我是div</div>
</body>
</html>
二、选择器
1、什么是选择器
通过选择器选中标签
2、选择器的写法
(1)元素选择器（标签选择器）：直接将标签名作为选择器，选中当前html中所有对应的标签
例如：a{} -- 选中当前html中所有的a标签
(2)id选择器
（所有标签都有一个id属性，值是自己设置，但是要保证一个html中，id的值唯一）
将标签的id属性的值前面加#号作为选择器，选中id属性值是指定值的标签
例如：#a -- 选中当前htm中id值是a的标签
(3）类选择器（class选择器）
将标签的class属性的值前面加.作为选择器，选择class属性值是指定的标签
一个html中相同的class值可以有多个。一个标签的class属性可以有多个值,多个值之间用空格隔开
(4)通配符
将*作为选择器 -- 选中当前html中所有的标签
(5）群组选择器
将多个单独的选择器用逗号隔开来作用一个选择器，选中每个独立选择器对应的标签。
p,a{} -- 选中所有的p标签和a标签
div，#a -- 选中所有的div标签和id值是a的标签
#p1，c1，c2 -- 选中id值是p1，class和c1和c2的标签
(6）后代选择器
将多个选择器用空格隔开来作为一个选择器
div p{} -- 选中所有div标签中的p标签
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
div{
color: red;
}
h1{
color: yellow;
}
#c9{
font-size: 50px;
}
.c1{
background: blue;
}
*{
width: 300px;
}
</style>
</head>
<body>
<div id="">
<div id="">
<p>我是段落1</p>
<div id="">
<h1 class="c1">我是标题1</h1>
</div>
</div>
<!--
这儿的标签有两个class值
-->
<p class="c1 c2">我是段落2</p>
</div>
<h1 id="c9">我是标题2</h1>
<hr />
</body>
</html>
三、伪选择器
1、伪类选择器
普通选择器选中的是html中不同的标签；伪类选择器选中的是标签的不同状态
2、语法
普通选择器：状态{属性1：值1；属性2：值2；...}
(1）link -- 初始状态；对应a标签来说，link对应的状态是a标签中的链接从来没有成功访问过
（一般只在a标签进行设置）
（2）visited -- 超链接成功访问过的状态
（3）hover -- 鼠标悬停在标签上对应的状态（不只针对超链接，其他标签页常用）
4) active -- 鼠标按住不放，对应的状态（主要用在超链接和按钮）
3、选择器的权重值（权重越高优先级越高，内联样式表的优先级永远最高）
元素选择器的权重：0001 == 1
class选择器的权重: 0010 == 2
id选择器的权重： 0100 == 4
伪类选择器的权重： 0001 == 1
群组选择器的权重：看单独每个选择器的权重
后代选择器的权重：所有选择器的权重之和
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
/*1)link*/
a:link{
color: rgb(150,150,150);
}
/*#a1:link{}*/
a:visited{
color: green;
}
a:hover{
color: red;
font-size: 30px;
}
p:hover{
background-color: lightgoldenrodyellow;
}
a:active{
color: blueviolet;
}
button:active{
background-color: lightseagreen;
}
.h1{
color: blue;
}
h1{
color: red;
}
#h1{
color: green;
}
div #h1{
color: yellow;
}
#div2 #div1 #h1{
background-color: hotpink;
}
</style>
</head>
<body>
<div id="div2">
<div id="div1">
<h1 style="background-color: yellowgreen;" id="h1" class="h1">我是标题</h1>
</div>
</div>
<a id="a1" href="https://www.baidu.com">百度一下</a>
<p>段落</p>
<button>按钮</button>
<a href="04-CSS基础.html">打开选择器</a>
</body>
</html>
网友评论