css的介绍: css(Cascading Style Sheet) 层叠样式表 作用就是给HTML页面标签议案家各种样式 定义网页效果 简单来说 就是讲网页内容和显示样式进行分离 , 提高了显示功能.
css 的优点: 1 使数据和显示分开 2 降低网络流量 3 使整个网页视觉效果一致 4 使开发效率提高了 (耦合性降低 一人负责写HTML 一人负责写css)
三种引入方式 : 1 行内样式
<div> <p style="color: green">我是一个段落</p> </div>
2 内接样式:
<style type="text/css"> /* 位置是在head里边写我们的css代码*/ span{ color: yellow; } </style>
3 外界样式 包括链接式和导入式
链接式
<link rel="stylesheet" href="./index.css">
导入式
<style type="text/css"> @import url('./index.css'); //该方法类似于后端的导入模块方式 是css3中的方式 以后会用到 </style>
代码如下:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style type="text/css"> /*内接式*/ /*找标签 选择器:选中标签*/ p{ color: red; font-size: 30px; } .fu{ color: red; } </style> <!--外接式--> <!--<link rel="stylesheet" href="./css/index.css">--> <style type="text/css"> @import url('./css/index.css'); </style> </head> <body> <!--标准文档流下 总结: 行内样式的优先级 1000 大于 内接和外接式 --> <!--1.行内样式--> <div class="fu" style="color: aqua"> 福彩 </div> <p>李凯</p> <span>师宇</span> </body> </html>
优先级为 行内样式 > 内接样式 > 外接样式
css的选择器 基本选择器和高级选择器
基本选择器包含: 标签选择器 id选择器 以及类的选择器(公共类 即将类的相同属性写到一起 继承 避免代码的冗余) 标签选择器和类选择器比较类似 可以选中所有的该元素 标签的为标签元素 类的为名称为该类的元素 不管藏得有多深 都能选中
代码如下:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style type="text/css"> /*权重问题 数数 数选择器的数量 id class 标签*/ 一定牢牢记住这个顺序 /*1 0 0*/ #box{ color: darkorange; } /*0 1 0*/ .box{ color: green; } /*0 1 0*/ .active{ color: yellow; } /*001*/ div{ color: red; } /* 行内权重1000 > id 100 > 类 10 > 标签 1*/ </style> </head> <body> <div class="box active" id="box"> 哈哈哈 <div> <div> <div> 猜猜我的颜色 </div> </div> </div> </div> </body> </html>
权重问题: 行内权重 1000 > id 100 > 类 10 > 标签 1
高级选择器 : 后代选择器 子代选择器 并集选择器 交集选择器
后代选择器 : 使用空格表示后代选择器 顾名思义 父元素的后代 (包括儿子 孙子 重孙子)
.container p{
color: red;
}
.container .item p{
color: yellow;
}
子代选择器 > 仅仅包含当前元素的子代 (不包含孙子)
.container>p{
color: yellowgreen;
}
并集选择器 多个选择器之间用逗号隔开 表示选中的页面中的多个标签 一些共性的元素 可以使用并集选择器
/*并集选择器*/
h3,a{
color: #008000;
text-decoration: none;
}
交集选择器 使用.表示交集选择器 第一个标签必须是标签选择器 第二个必须是类选择器 语法 : div.active
h4{
100px;
font-size: 14px;
}
.active{
color: red;
text-decoration: underline;
}
/* 交集选择器 */
h4.active{
background: #00BFFF;
}
//它表示两者选中之后元素的共同特征
属性选择器 就是根据标签中的属性 选中当前的标签
/*根据属性查找*/
/*[for]{
color: red;
}*/
/*找到for属性的等于username的元素 字体颜色设为红色*/
/*[for='username']{
color: yellow;
}*/
/*以....开头 ^*/
/*[for^='user']{
color: #008000;
}*/
/*以....结尾 $*/
/*[for$='vvip']{
color: red;
}*/
/*包含某元素的标签*/
/*[for*="vip"]{
color: #00BFFF;
}*/
/**/
/*指定单词的属性*/
label[for~='user1']{
color: red;
}
input[type='text']{
background: red;
}
/*权重问题 数数 数选择器的数量 id class 标签*/
权重相同时 以后来设置的属性为主
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> /*1 2 1*/ .box1 .box2 #wrap3 p{ color: red; } /*1 2 1*/ #wrap1 .box2 div .active{ color: green; } /*2 0 1*/ /*#wrap1 #wrap2 div p{*/ /*}*/ </style> </head> <body> <div class="box1" id="wrap1"> <div class="box2" id="wrap2"> <div class="box3" id="wrap3"> <p class="active">猜猜我的颜色</p> </div> </div> </div> </body> </html>
通过继承来设置的属性 它的权重为0 与选中的元素没有可比性
#box1 #box2 .wrap3{
color: red;
}
#box2 .wrap3 p{
color: green;
}
// 运行结果为绿色的
都是继承来的 谁描述的近 显示谁的属性 (就近原则)
#box1 #box2 .wrap3{
color: red;
}
.wrap1 #box2{
color: green;
}
//红色的离得较近 字体颜色是红色的
可以继承的属性有 : color font-* line-* text-* 属性
伪类选择器 一般会用在超链接a标签中 使用a标签的伪类选择器 一定要遵循 爱恨准则 LoVe HAte
/*没有被访问的a标签的样式*/
.box ul li.item1 a:link{
color: #666;
}
/*访问过后的a标签的样式*/
.box ul li.item2 a:visited{
color: yellow;
}
/*鼠标悬停时a标签的样式*/
.box ul li.item3 a:hover{
color: green;
}
/*鼠标摁住的时候a标签的样式*/
.box ul li.item4 a:active{
color: yellowgreen;
}
实例
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> body{ color: red; } /*没有被访问过的a的颜色*/ a:link{ color: greenyellow; } /*访问过后的颜色*/ a:visited{ color: darkgreen; } /*鼠标悬浮时候的状态*/ a:hover{ color: darkgray; font-size: 20px; text-decoration: none; } a:active{ color: darkblue; } .box{ color: green; /*设置小手的状态*/ cursor: pointer; } .box>p{ display: none; } .box:hover p{ color: darkorange; font-size: 20px; display: block; } input { border: 0; outline: none; width: 300px; height: 40px; border: 1px solid #999; border-radius: 2px; } </style> </head> <body> <!--爱恨准则 LoVe HAte--> <input type="text"> <a href="#">百度一下</a> <div class="box"> 悬浮 <p> 李凯 </p> </div> </body> </html>
css的两大特征 : 继承性和层叠性 继承性 即继承父类的属性和方法 层叠性即权重大的标签覆盖掉权重小的标签 . 就是判断权重 谁的权重大谁说了算 判断权重 即数数
数 :id 的数量 class的数量 标签的数量 顺序不能乱.
权重一样就近原则 谁离得近就显示谁的属性