CSS选择器(Cascading Style Sheet，层叠样式表)
css代码写法: h1{color:red;} 选择器{css属性:属性值;}
css代码引入
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>css引入</title>
<style>/*内联引入*/
div{
color: #ff0a09;
}
</style>
</head>
<body>
<div>我是</div>
<div>渣渣</div>
</body>
</html>
<!--外联引入-->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>css引入</title>
<link rel="stylesheet" href="外联引入cs.css"><!--外联引入-->
</head>
<body>
<div>我是</div>
<div>渣渣</div>
</body>
</html>
<!--行内引入 优先级最高-->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>css引入</title>
</head>
<body>
<div style="color: #ff0a09">我是</div>
<div>渣渣</div>
</body>
</html>
css选择器
基本选择器(标签 类 id)
- 标签选择器
- 类选择器
- id选择器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>基本标签选择器</title>
<style>
/*子元素会继承父元素的样式 a标签除外 要想对a设置要找到a单独设置*/
span {
color: #ff0a09;
}
div {
color: #ff87f5;
}
a {color: aqua}
</style>
</head>
<body>
<div>嘿嘿
<span>
我是一个span 在div中
</span></div>
<apan>只有span</apan>
<div>
只有div啦啦啦
<a href="">div中的a标签</a>
</div>
<a href="">我是单独a哈哈哈哈</a>
</body>
</html>
id 类选择器
类选择器（.的方式）不可以设置数字 id优先级最高（#的方式） 通用选择器代表选择所有（*的方式）优先级最低
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>id 类选择器</title>
<style>
* {
color: aqua;
}
#hh{
color: #ff0a09;
}
.sq{
color: #ff87f5
;
}
</style>
</head>
<body>
<div>
<span id="hh">
我是一个span 在div中
</span></div>
<apan class="sq">只有span</apan>
<div>
只有div啦啦啦
<a href="">div中的a标签</a>
</div>
<a class="sq" href="">我是单独a哈哈哈哈</a>
</body>
</html>
高级选择器：(后代 子代 并集 交集)
- 后代选择器
- 子代选择器
- 并集选择器(组合选择器)
- 交集选择器
<!--后代选择器-->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>后代高级选择器</title>
<!-- 在div中的span都会变色 子子孙孙-->
<style>
div span{
color: red;
}
</style>
</head>
<body>
<div>我是div
<span>我是div中span</span>
<p>
在div中的p标签
<span>div中的p标签中的span标签</span>
</p>
</div>
<span>我是单独span</span>
</body>
</html>
子代高级选择器---------
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>子代高级选择器</title>
<style>
div>span{ /*只会找div儿子span*/
color: red;
}
</style>
</head>
<body>
<div>我是div
<span>我是div中span</span>
<p>
在div中的p标签
<span>div中的p标签中的span标签</span>
</p>
</div>
<span>我是单独span</span>
</body>
</html>
毗邻选择器 只会找临近的
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>毗邻选择器</title>
<style>
span+a{ /*只会找span下面一个a(a自由设置） */
color: red;
}
</style>
</head>
<body>
<div>我是div
<span>我是div中span</span>
<span>我是div中span2222</span>
<a>我是div中a</a>
<p>
在div中的p标签
<span>div中的p标签中的span标签</span>
</p>
</div>
<span>我是单独span</span>
<a>我是单独a</a>
<a>我是单独a2 多了找不到</a>
<span>我是单独span22222</span>
</body>
</html>
弟弟选择器
同级以下
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>弟弟选择器</title>
<style>
span~a{ /*只会找span同级下面a(a自由设置） */
color: red;
}
</style>
</head>
<body>
<div>我是div
<span>我是div中span</span>
<span>我是div中span2222</span>
<a>我是div中a</a>
<p>
<a href="">我是div中的p标签中的a标签-------</a>
在div中的p标签
<span>div中的p标签中的span标签</span>
</p>
</div>
<span>我是单独span</span>
<a>我是单独a</a>
<a>我是单独a2 多了找不到</a>
<span>我是单独span22222</span>
</body>
</html>
属性选择器 利用属性选择 变色
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>弟弟选择器</title>
<style>
a[href]{ /*a标签里面有href属性的就会变色 范围大点 */
color: red;
}
input[type=sqsq] { /*input type属性等于sqsq的会变色(范围更精准了) */
color: #47c38e;
}
</style>
</head>
<body>
<div>我是div
<span>我是div中span</span>
<span>我是div中span2222</span>
<a>我是div中a</a>
<p>
<a href="">我是div中的p标签中的a标签-------</a>
在div中的p标签
<span>div中的p标签中的span标签</span>
</p>
</div>
<span>我是单独span</span>
<a href='sqsq'>我是单独a</a>
<a>我是单独a2 多了找不到</a>
<span>我是单独span22222</span>
<input type="sqsq">
</body>
</html>
<!--并集选择器-->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>交集选择器 缩小范围</title>
<style>
#aa{ /*不在div中给内容 给背景宽高与背景色 也会显示撑起来*/
color: #ff0a09; /*文字颜色*/
width: 200px;
height: 200px; /*背景高*/
background: #47c38e; /*背景颜色*/
}
div.sqsq{ /*标签名为div且class类等于sqsq的变色 缩小范围*/
color: #ffbf3b;
width: 200px;
height: 200px; /*背景高*/
background: #2e3a7e;
}
</style>
</head>
<body>
<div>我是div
<span>我是div中span</span>
<span>我是div中span2222</span>
<a>我是div中a</a>
<p>
<a href="">我是div中的p标签中的a标签-------</a>
在div中的p标签
<span>div中的p标签中的span标签----------------</span>
</p>
</div>
<span>我是单独span</span>
<a href='sqsq'>我是单独a</a>
<a>我是单独a2 多了找不到</a>
<span>我是单独span22222</span>
<input type="sqsq">
<div id="aa"></div>
<div class="sqsq">我有class中 sqsq</div>
</body>
</html>
更多选择器：(伪类 伪标签 属性)
- 伪类选择器
- 伪标签选择器
- 属性选择器
<!--伪类选择器-->
<!--针对a : link visited active-->
<!--针对input: focus-->
<!--通用标签: hover-->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>交集选择器 缩小范围</title>
<style>
a:link{ /*没有点之前链接颜色*/
color: #ff0a09;
}
a:visited{ /*访问之后链接颜色*/
color: #000;
}
a:active{ /*按下时动作颜色*/
color: #ff87f5;
}
input:focus{ /*焦点输入框颜色*/
background-color: aqua;
}
div{
color: #0a0607;
width: 200px;
height: 200px; /*背景高*/
background: #2e3a7e;
}
div:hover{
/*鼠标悬浮 背景变色 字体不会变*/
background-color: #ffbf3b;
}
</style>
</head>
<body>
<div>我是div
<span>我是div中span</span>
<span>我是div中span2222</span>
<a>我是div中a</a>
<p>
<a href="">我是div中的p标签中的a标签-------</a>
在div中的p标签
<span>div中的p标签中的span标签----------------</span>
</p>
</div>
<span>我是单独span</span>
<a href='sqsq'>我是单独a</a>
<a>我是单独a2 多了找不到</a>
<span>我是单独span22222</span>
<input type="sqsq">
<div id="aa"></div>
<div class="sqsq">我有class中 sqsq</div>
</body>
</html>
选择器的优先级
/*优先级数字越大,越优先显示其效果,优先级相同的,显示后面定义的选择器对应的样式*/
/*id选择器优先级为100*/
/*#d1{*/
/*color:deepskyblue;*/
/*}*/
/*!*继承的优先级为0*!*/
/*body{*/
/*color:red;*/
/*}*/
/*!*类选择器的优先级是10*!*/
/*.c1{*/
/*color: blue;*/
/*}*/
/*.c2{*/
/*color: orange;*/
/*}*/
/*!*元素选择器优先级是1*!*/
/*div{*/
/*color: green;*/
/*}*/
内敛样式优先级为1000
<p class="cc3" style="color: red;">我是cc3的p标签</p>
important优先级最高,最牛逼
.cc1 .cc3 {
color: purple!important;
}
css的两大特性 ：继承性和层叠性
继承性：给父级设置一些属性，子级继承了父级的该属性，这就是我们的css中的继承。
选择器总结
使用什么选择器？
- 不要去试图用一个类将我们的页面写完。这个标签要携带多个类，共同设置样式
- 每个类要尽可能的小，有公共的概念，能够让更多的标签使用
- id or class in css ？ 尽可能的用class。除非一些特殊情况可以用id，id一般是用在js的。也就是说 js是通过id来获取到标签
选择器的权重
- 先看标签元素有没有被选中，如果选中了，就数数 （id,class,标签的数量） 谁的权重大 就显示谁的属性。权重一样大，后来者居上
- 如果没有被选中标签元素，权重为0。
- 如果属性都是被继承下来的 权重都是0 。权重都是0:"就近原则" ： 谁描述的近，就显示谁的属性
伪类选择器针对a标签
a标签自带的效果:未访问过的时候是蓝色的字体颜色,访问过之后是紫色的,自带下划线
/* 未访问的链接 */
a:link {
color: #FF0000
}
/* 已访问的链接 */
a:visited {
color: #00FF00
}
/* 鼠标移动到链接上 */ 这个用的比较多,可以应用在其他标签上
a:hover {
color: #FF00FF
}
/* 选定的链接 */ 就是鼠标点下去还没有抬起来的那个瞬间，可以让它变颜色
a:active {
color: #0000FF
}
/*input输入框获取焦点时样式*/
input:focus { #input默认的有个样式，鼠标点进去的时候，input框会变浅蓝色的那么个感觉
#outline: none;
background-color: #eee; #框里面的背景色
}
css属性相关
高度宽度设置,注意:只有块级标签能够设置高度宽度,内敛标签不能设置高度宽度,它的高度宽度是由内容决定的
div{
width: 100px; 宽度
height: 100px; 高度
background-color: pink;
}
补充:a标签的字体颜色设置必须选中a标签才行
.c1 a{
color: red;
}
字体属性
字体
.c1{
font-family: '楷体','宋体','微软雅黑';
}
字体大小
.c1{
/*font-family: '楷体','宋体','微软雅黑';*/
font-size:14px; 默认字体大小为16px.
}
字体颜色
color:red;
子重,粗细
.c1{
font-weight: bold;
font-weight: 100;
}
值 描述
normal 默认值，标准粗细
bold 粗体
bolder 更粗
lighter 更细
100~900 设置具体粗细，400等同于normal，而700等同于bold
颜色表示方式
p{
/*color: red;*/
/*color: #78FFC9;*/
/*color: rgb(123,199,255);*/
color: rgba(123,199,255,0.3); 多了一个透明度的数字:0-1的一个数字
}
文字属性
文字对齐
text-align
div{
width: 200px;
height: 200px;
background-color: yellow;
/*text-align: center;*/
text-align: right;
}
left 左边对齐 默认值
right 右对齐
center 居中对齐
文字装饰
text-decoration
div a{
/*text-decoration: none;*/ #给a标签去除下划线
/*text-decoration: line-through;*/
text-decoration: overline;
}
值 描述
none 默认。定义标准的文本。
underline 定义文本下的一条线。
overline 定义文本上的一条线。
line-through 定义穿过文本下的一条线。
首行缩进
p {
text-indent: 32px; #首行缩进两个字符，因为我记得一个字在页面上的默认大小为16px
}
背景属性
背景颜色
background-color: red;
div{
width: 600px;
height: 600px;
/*background-color: red;*/
/*background-image: url("yeye.jpg");*/
/*background-repeat: no-repeat;*/
/*background-position: 100px 50px;*/ 相对于div标签的,距离左边100px,距离上面50px
background:url("yeye.jpg") no-repeat left center;
/*background-position: right top;*/
}
简写方式,颜色 图片路径 是否平铺 图片位置
background:#ffffff url('1.png') no-repeat right top;