目录
前端CSS
CSS三种引入方式
1.外部css文件(最正规的书写方式)
2.head内style标签内部直接书写css代码(为了教学方便可以使用这种)
3.标签内部通过style属性直接书写对应的样式(不推荐)CSS标签选择器
基本选择器
1.元素选择器
/*标签选择器 元素选择器*/
div { /*将页面上所有的div标签内部的文本变成红色*/
color: red;
}2.类选择器
/*类选择器 点号*/
.c1 { /*让所有具有c1类属性值的标签内部文本变成蓝色*/
color:blue;
}3.id选择器
/*id选择器 #号*/
#d1 { /*将id为d1的标签内部文本内容改成绿色*/
color: green;
}4.通用选择器
/*通用选择器 *号*/
* { /*页面上所有的标签统一修改样式*/
color: aqua;
}组合选择器
1.后代选择器 空格
//div下的所有a,包括儿子，孙子。。。。
div a
{
}2.儿子选择器 >
//只有div下的儿子才能被作用
div > a
{
}
3.毗邻选择器 +
//div下紧挨着的下一个标签
div + a
{
}
4.弟弟选择器 ~
//div 同级别下面所有的标签。div标签下面的所有a标签
div ~ a
{
}
属性选择器 中括号[ ]
精确度又称为：粒度
1.精确属性查找
/*属性选择器 [] */
[username] { /*找到页面上所有具有username属性名的标签*/
background-color: deeppink;
}2.更精确属性查找
[username='jason'] { /*找到页面上属性名是username并且属性值叫jason的标签*/
background-color: black;
}3.精确度再提高查找
input[username="jason"] { /*找到页面上属性名是username并且属性值叫jason的input标签*/
background-color: aqua;
}组合选择器
1.标签组合选择
没有组合之前：代码冗余，陋
div {
color: red;
}
p {
color: red;
}
span {
color: red;
}组合之后：
div ,p, span {
color: red;
}伪类选择器
1.日常状态
a:link {
color: aqua;
}2.鼠标悬浮时
a:hover { /*鼠标悬浮*/
color: black;
}3.鼠标按下时
a:active {
color: green;
}4.鼠标送开时
a:visited {
color: gray;
}5.鼠标聚焦之后触发
input:focus {
background-color: red;
}伪元素选择器
1.选择首字
p:first-letter {
color: red;
font-size: 48px;
}2.再标签之前添加文本
p:before {
content: '添加的内容'; # 在p标签之前添加内容
color: red;
}3.在标签之后添加文本
p:after {
content: 'jeff'; # 在p标签之后添加文本
color: blue;
}