css样式的引入
1. 行内引入
<div> <p style="color: green">我是一个段落</p> </div>
2. 内接样式
<style type="text/css"> /*写我们的css代码*/ span{ color: yellow; } </style>
3. 外接样式 - 链接式
<link rel="stylesheet" href="./index.css">
4. 外接样式 - 导入式
<style type="text/css"> @import url('./index.css'); </style>
最简单的基本样式
<style> div{ color: red; width: 200px; height: 200px; /*background-color: yellow;*/ } </style>
基本选择器
标签选择器
标签选择器可以选中所有的标签元素，比如div，ul，li ，p等等，不管标签藏的多深，都能选中，选中的是所有的，而不是某一个，所以说 "共性" 而不是 ”特性“
body{
color:gray;
font-size: 12px;
}
/*标签选择器*/
p{
color: red;
font-size: 20px;
}
span{
color: yellow;
}
类选择器
所谓类：就是class . class与id非常相似 任何的标签都可以加类，但是类是可以重复,属于归类的概念。同一个标签中可以携带多个类，用空格隔开
.lv{ color: green; } .big{ font-size: 40px; } .line{ text-decoration: underline; }
<!-- 公共类 共有的属性 --> <div> <p class="lv big">段落1</p> <p class="lv line">段落2</p> <p class="line big">段落3</p> </div>
id选择器
同一个页面中id不能重复。
任何的标签都可以设置id ，id命名规范 要以字母 可以有数字 下划线 - 大小写严格区分 aa和AA是两个不一样的属性值
#box{
background:green;
}
#s1{
color: red;
}
#s2{
font-size: 30px;
}
<body> <div id="box">娃哈哈</div> <div id="s1">爽歪歪</div> <div id="s2">QQ星</div> </body>
通用选择器
所有的标签都会被选中
* {color : red;}
高级选择器
后代选择器
使用空格表示后代选择器。顾名思义，父元素的后代（包括儿子，孙子，重孙子）
<head> <meta charset="UTF-8"> <title>Title</title> <style> div span{ color: tomato; } </style> </head> <body> <div> 我是div标签的content <span>西红柿色1</span> <p> 在div-p标签中 <span>西红柿色2</span> </p> </div> <span>我只是一个单纯的span标签</span> </body>
子代选择器
使用>表示子代选择器。比如div>p,仅仅表示的是当前div元素选中的子代(不包含孙子....)元素p
<head> <meta charset="UTF-8"> <title>Title</title> <style> div>span{ color: tomato; } </style> </head> <body> <div> 我是div标签的content <span>西红柿色1</span> <p> 在div-p标签中 <span>西红柿色2</span> </p> </div> <span>我只是一个单纯的span标签</span> </body>
毗邻选择器
使用+表示毗邻选择器。比如span+a，只找span标签下面一个的a标签，找不到就算了
<style> span+a{ color: tomato; } </style> <div> <a>我是a0标签</a> <span>span标签</span> <a>我是a1标签</a> <!--变色--> <a>我是a2标签</a> </div>
弟弟选择器
使用~表示弟弟选择器。比如span~a，找span下面所有的a标签
<style> span~a{ color: tomato; } </style> <div> <a>我是a0标签</a> <span>span标签</span> <a>我是a1标签</a> <!--变色--> <a>我是a2标签</a> <!--变色--> </div>
属性选择器
属性选择器，字面意思就是根据标签中的属性，选中当前的标签。
<style> /*a[href]{*/ /*color: green;*/ /*}*/ /*a[href='http://www.taobao.com']{*/ /*color: lightpink;*/ /*}*/ input[type='text']{ background-color: lightblue; } </style> <body> <div> <a href="http://www.taobao.com">我是a0标签</a> <span>span标签</span> <a href="http://www.jd.com">我是a1标签</a> <a href="http://www.mi.com">我是a2标签</a> <a>没有href属性</a> </div> <input type="text"> <input type="password"> </body>
并集选择器
多个选择器之间用逗号隔开，表示选中的页面中的多个标签。一些共性的元素可以使用并集选择器
<style> ul,ol,span{ background-color: gainsboro; } </style> <body> <ul> <li>u-first</li> </ul> <ol> <li>o-first</li> </ol> </body>
交集选择器
使用 . 表示交集选择器。第一个标签必须是标签选择器，第二个标签必须是类选择器 语法：div.active
<style> div.box1.box2{ background-color: red; width: 200px; height: 200px; } </style> <body> <div class="box1 box2">box1box2</div> <div class="box1">box1</div> <div>aaa</div> <span class="box1">span标签</span> </body>
伪类选择器
提前对标签进行定义
<style> a:link{ color:tomato; } a:visited{ color: gray; } a:active{ color: green; } input:focus{ background-color: aquamarine; } div{ width: 100px; height: 100px; background-color: lightgray; } div:hover{ background-color: pink; } </style> <body> <a href="http://www.jd.com">京东</a> <a href="http://www.xiaohuar.com">校花</a> <input type="text"> <div></div> </body> 其中 a : link（未访问过的链接） visited（访问过的链接） active（鼠标在链接按下时） input: focus（获取焦点后） 通用: hover（鼠标悬浮时）（通用）
伪元素选择器
对选到的元素进行操作（通用）
<style> p:first-letter{ color: green; } p:before{ content: '**'; /*color: pink;*/ } p:after{ content: '.....'; color: lightblue; } </style> <body> <div>春江水暖鸭先知</div> </body> 其中 first-letter 操作第一个字符 before 在语句前操作 after 在语句后操作
css选择器的优先级
行内样式 1000> id选择器 100 > 类选择器 10 > 标签选择器 1 > 继承样式 0
所有的值可以累加但是不进位
优先级如果相同,写在后面的生效
!important:设置权重为无限大
!important 不影响继承来的权重，只影响选中的元素。不要随便使用!important,因为使用它会影响页面的布局
颜色表示
rgb表示法:
rgb :red green blue 光谱三原色
rgb(255,255,255) 白色
rgb(0,0,0) 黑色
16进制的颜色表示法
#000000-#FFFFFF
#000 - #FFF
单词表示法:
# red green
rgba表示法:
#a表示的是透明度 0-1,0是完全透明,1是不透明
https://htmlcolorcodes.com/zh/yanse-ming/
字体
p{ font-family: 'Microsoft Yahei','楷体','仿宋'; font-weight: bold; font-size: 12px; } famliy 设置字体 weight 宽度粗细 size 所占大小
文本
text-align 文字的水平对齐
left 左对齐
center 居中
reght 右对齐
text-decoration 文本装饰
none; 没有下划线
line-through; 中划线
overline; 上划线
underline; 下划线
text-indent 文本缩进
text-indent: 2em; em单位是一个相对单位,相对当前字体大小的像素是1em
line-height 行高,设置行高=容器高度,文字自动垂直居中
line-height: 200px;
color:设置字体颜色
背景图片
background-color: red; 在没有背景图片覆盖的范围显示背景颜色 background-image: url('timg.jpg'); 设置背景图片 height: 400px; 400px; background-repeat: no-repeat; 设置图片不重复 repeat-x水平重复 repeat-y垂直重复 background-position: right top; 图片的位置 或离左边的距离x 离右边的距离y /*left center right /top center bottom*/ background-attachment: fixed; 在窗口中固定图片的位置（了解） background:red url("timg.jpg") no-repeat left center; 把所有的设置综合写在background中
边框
100px; height: 100px; /*border-color: tomato green gray yellow;*/ 设置边框颜色，可混合 /*border- 1px 3px 5px 7px;*/ 设置边框粗细，可混合 /*border-style: solid dotted dashed double;*/ 设置边框样式，实线、圆点、虚线、双线 /*一个值:上下左右 四个值:遵循顺时针上右下左 三个值:上 右左 下 两个值:遵循上下 左右 */ /*border-top-style:solid ;*/ 单独设置顶线的样式(left,bottom,right) /*border-top-color:red;*/ 单独设置顶线颜色 border:yellow solid 10px; 统一设置边框的颜色 样式 宽度
块级元素和行内元素的转换
对于行内标签来说不能设置宽和高
有些时候需要行内标签也设置宽和高,需要进行行内-->块,行内->行内块
display的属性值 : block块 inline行内 inline-block行内快 none
display: block; 独占一行并且可以设置宽高
display: inline-block; 既可以设置宽高又不会独占一行 行内块转行内快
display: inline; 表示一个行内元素,不能设置宽高
display: none; 不仅不显示内容,连位置也不占了
盒模型
border : 边框的宽度
padding : 内边距的距离
content : width height
背景包含的部分:padding + conntent
计算一个盒子的总大小: 宽width+2padding+2border 高height+2padding+border
外边距 margin
上下的盒子如果设置bottom和top会导致塌陷,取两个设置的最大值作为外边距
margin: 0 auto;表示左右居中(父盒子宽度,子盒子宽度)
分方向的设置
border-top border-right border-bottom border-left
padding-top padding-right padding-bottom padding-left
margin-top margin-right margin-bottom margin-left
给图形设置圆角
border-radius: 5px;
浮动
float:left /right 向左/右浮动 浮动的元素会脱离标准文档流,原本块级元素就不再独占整行了 并且在原页面中也不占位置了,之后的元素会挤到页面上影响页面的排版 清除浮动 clear:both 伪元素清除法: .clearfix:after{ content: ''; clear: both; display: block; } <body> <div class="father clearfix"> <div class="box"></div> <div class="box"></div> </div> <div class="main"> 主页的内容 </div> </body>
overflow
内容超出标签的大小
visible 可见(默认)
hidden 超出部分隐藏 还可以清除浮动
scroll 超出显示滚动条
定位
position : relative（相对） /absolute（绝对） /fixed（固定）
top:10px; 这四个值只有在有position时才生效
right:10px;
bottom:10px;
left:10px;
相对定位 :相对自己原来的位置移动,移动之后还占据原来的位置
绝对定位 :绝对定位是相对于整个html页面,不会占据原来的位置,层级的提升
如果我们设置了绝对定位的元素 的父元素 没有设置position,那么我们对元素的所有设置都是基于整个页面
如果设置了position,那么子盒子的absolute位置会根据父盒子的位置定位
父相子绝:子元素设置的绝对位置会对应着祖级元素的相对位置
固定定位 :固定是相对于整个窗口的
透明度
opacity: 0.5;调整d4对应的整个标签的透明度是50% .d4{ opacity: 0.5; } <div class="d4"> 你好你好娃哈哈 <img src="timg.jpg" alt=""> </div>
z - index
用法说明:
z-index 值表示谁压着谁，数值大的压盖住数值小的，
只有定位了的元素，才能有z-index,也就是说，不管相对定位，绝对定位，固定定位，都可以使用z-index，而浮动元素不能使用z-index
z-index值没有单位，就是一个正整数，默认的z-index值为0如果大家都没有z-index值，或者z-index值一样，那么谁写在HTML后面，谁在上面压着别人，定位了元素，永远压住没有定位的元素。
从父现象：父亲怂了，儿子再牛逼也没用