1.css语法结构
每个CSS样式由两个组成部分：选择器和声明。声明又包括属性和属性值。每个声明之后用分号结束
选择器 {属性名1:属性值1;属性名2:属性值2}
2.css几种引入方式
1.布局方式 a. table方式布局 b.div + table结合布局 c.div + css进行布局 2. css的三种引入方式 a.直接在标签中写入：行内样式(不推荐大规模使用，css样式过长，样式与内容混合，不利于后期维护) b. 内部样式：css的样式写在head标签中间 <style type="text/css"> 选择器 { (属性)background-color: (属性值)red; } 选择器: 作用域 会对此选择器发生作用 div{ background-color: red; font-size: 25px } </style> c. 外部样式 将css写入到一个单独的文件中, 然后在html中直接引入 <link href="mystyle.css" rel="stylesheet" type="text/css"/>
3.css选择器
选择器: 作用域 会对此选择器发生作用
a. 标签(html标签)选择器 div{ font-size: 25px; background-color: bisque; } html: <div>test1test1test1</div> b. ID选择器 #x1{ background-color: black; color: red; font-size: 30px; } html: <div id="x1">yyyyyyyyyyyyyyyyyyy</div> 注意：ID是唯一的才有意义 c.类别选择器 .c1{ background-color: blanchedalmond; font-size: 40px; color:darkred; } html: <div class="c1">qqqqqqqqqqqqqqqqqqqqqqqqqqqqqq</div> d. 通用选择器 # 将网页上所有元素都运用此样式 #紧贴浏览器边缘 *{margin: 0;padding: 0} e. 包含选择器 .c1 span{ background-color: aquamarine; } html: <div class="c1"> <span>spanspan_span_span</span> </div> f. 分组选择器 .c1,span{ color:red; } html: <div class="c1">cccc11111111111111</div> <span>bdbdbd</span>
4.组合选择器
a. 后代选择器 /*li内部的a标签设置字体颜色*/ li a { color: green; } b. 儿子选择器 /*选择所有父级是 <div> 元素的 <p> 元素*/ div>p { font-family: "Arial Black", arial-black, cursive; } c. 毗邻选择器 /*选择所有紧接着<div>元素之后的<p>元素*/ div+p { margin: 5px; } d. 弟弟选择器 /*i1后面所有的兄弟p标签*/ #i1~p { border: 2px solid royalblue; }
5.伪类选择器
/* 未访问的链接 */
a:link {
color: #FF0000
}
/* 鼠标移动到链接上 */
a:hover {
color: #FF00FF
}
/* 选定的链接 */
a:active {
color: #0000FF
}
/* 已访问的链接 */
a:visited {
color: #00FF00
}
/*input输入框获取焦点时样式*/
input:focus {
outline: none;
background-color: #eee;
}
html:
<a href="http://www.baidu.com">跳转到百度</a>
6.选择器优先级
1.当选择器相同的情况下我们采用的是就近原则
谁离标签越近听谁的
2.选择器不同的情况下 是有优先级之分
行内样式 > ID选择器 > 类别选择器 > 标签选择器 > 通配符选择器
7.给标签设置样式的参数
a. 宽和高
width属性可以为元素设置宽度。
height属性可以为元素设置高度。
块级标签才能设置宽度，内联标签的宽度由内容来决定。
b. 文本属性
font-size: 设置字体的大小
color: 设置字体的颜色
text-align : left/right/center 文本居左/右/中 对齐
line-height: 行高 字体居中显示 取值应和height的值一样
text-decoration: underline/line-through/overline 属性用来给文字添加特殊效果
首行缩进
p {
text-indent: 32px;
}
c. 边框
border: 1px solid red;
如果你不知道你所占的div的大小的时候, 可以使用border
值：none(无边框),dotted(点状虚线边框),dashed(矩形虚线边框),solid(实线边框)
画圆：
实现圆角边框的效果：
border-radius设置为长或高的一半即可得到一个圆形
d. background-color:背景属性
backgroud作为前缀
规律:
如果多个参数的前缀都是一样的，那么一般情况下都可以有简写的形式，就是以该前缀为参数
/*背景颜色*/
background-color: red;
/*背景图片*/
background-image: url('1.jpg');
/*
背景重复
repeat(默认):背景图片平铺排满整个网页
repeat-x：背景图片只在水平方向上平铺
repeat-y：背景图片只在垂直方向上平铺
no-repeat：背景图片不平铺
*/
background-repeat: no-repeat;
/*背景位置*/
background-position: left top;
/*background-position: 200px 200px;*/
支持简写：
background:#336699 url('1.png') no-repeat left top;
利用背景图片布局
background-attachment: fixed;
背景图像：
background-img:
background-image: url("aaa.png");
background-repeat: repeat-y;
background-position-y: 图像位置 距离浏览器窗口顶部的距离
background-position-x: 图像位置 距离浏览器左边的距离
8.布局属性：
外边距：一个div和另一个div之间的距离
margin-top: 上边距
margin-bottom: 下边距
margin-left: 左边距
margin-right: 右边距
margin : 10px : 上下左右 都是10px
margin : 10px 20px; 上下是10px 左右是20px
margin : 10px 20px 30px
margin-top: 10px;
margin-right: 20px;
margin-bottom: 30px;
margin-left: 20px;
margin : 10px 20px 30px 40px;
内边距：
padding-top:10px; 文字距离div顶部的距离
padding-left:20px; 文字距离div左边的距离
padding-right:20px;
padding-bottom: 30px;
padding: 10px; 上下左右 都是10px
padding : 10px 20px; 上下是10px 左右是20px
padding : 10px 20px 30px
margin-top: 10px;
margin-right: 20px;
margin-bottom: 30px;
margin-left: 20px;
padding : 10px 20px 30px 40px;
取消自带留白
*{
margin:0;
padding:0;
}
9.浮动属性
float: left / right; #如果儿子飘起来, 老子管不住: <div style="clear: both"></div>
| 值 | 描述 |
| left | 在左侧不允许浮动元素 |
| right | 在右侧不允许浮动元素 |
| both | 在左右两侧均不允许浮动元素 |
| none | 默认值。允许浮动元素出现在两侧 |
| inherit | 规定应该从父元素继承 clear 属性的值 |
clear属性规定元素的哪一侧不允许其他浮动元素
注意：clear属性只会对自身起作用，而不会影响其他元素。
示例
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> #i1{ border: 1px solid green; width: 800px; } .c1{ border: 1px solid red; width: 200px; height: 200px; float: left; } </style> </head> <body> <div id="i1"> <div class="c1"> </div> <div class="c1"> </div> <div class="c1"> </div> <div class="c1"> </div> <div style="clear: none"></div> </div> </body> </html>
10.display:用于控制HTML元素的显示效果(使用频率不高)
| 值 | 意义 |
| display:none; | HTML文档中元素存在，但是在浏览器中不显示。一般用于配合JavaScript代码使用 |
| display:block | 默认占满整个页面宽度，如果设置了指定宽度，则会用margin填充剩下的部分 |
| display:inline | 按行内元素显示，此时再设置元素的width、height、margin-top、margin-bottom和float属性都不会有什么影响。 |
| display:inline-block | 使元素同时具有行内元素和块级元素的特点。 |
11.overflow溢出处理属性
overflow: auto; 自动设置滚动条
overflow: none: 自动隐藏超出的部分
left：向左浮动
right：向右浮动
none：默认值，不浮动
visible 默认值。内容不会被修剪，会呈现在元素框之外。
hidden 内容会被修剪，并且其余内容是不可见的。
scroll 内容会被修剪，但是浏览器会显示滚动条以便查看其余的内容。
auto 如果内容被修剪，则浏览器会显示滚动条以便查看其余的内容。
inherit 规定应该从父元素继承 overflow 属性的值。
<!DOCTYPE HTML> <html> <head> <meta charset="UTF-8"> <meta http-equiv="x-ua-compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>圆形的头像示例</title> <style> * { margin: 0; padding: 0; background-color: #eeeeee; } .header-img { width: 150px; height: 150px; border: 3px solid white; border-radius: 50%; overflow: hidden; } .header-img>img { width: 100%; } </style> </head> <body> <div class="header-img"> <img src="https://img10.360buyimg.com/n1/jfs/t1/137843/33/10442/151310/5f84167bE6f35f0c3/d2d830fea64c7691.jpg" alt=""> </div> </body> </html> 圆形头像示例
12.定位
1.static静态定位
所有的标签默认都是静态定位，意思就是无法移动位置
如果你想要通过得的方式移动某个标签，就必须先将改标签设置成不是static定位
2.relative相对定位
相对于标签原来的位置
3.absolute绝对定位
相对于已经定位过的父标签(不需要考虑其他标签)
eg:小米网购物车
4.fixed固定定位
固定在浏览器窗口某个位置不动
eg:小米网右下方多个小图标
position: relative;
position: relative;
position: absolute;
position: fixed;
13.z-index
<style> .cover { position: fixed; top: 0; left: 0; right: 0; bottom: 0; background-color: rgba(128,128,128,0.4); z-index: 999; } .modal { height: 200px; width: 400px; background-color: white; position: fixed; top: 50%; left: 50%; z-index: 1000; margin-top: -100px; margin-left: -200px; } </style> <div class="cover"></div> <div class="modal"> <p>username:<input type="text"></p> <p>password:<input type="text"></p> <button>提交</button> </div>
opacity既可以改变颜色也可以改变文本
而rgba只针对颜色