前端css
一.css简介
CSS介绍：
css(cascading style sheet，层叠样式表)定义如何显示HTML元素
当浏览器读到一个样式表，他会会按照这个样式来对文档进行格式化（渲染）
CSS语法
每个CSS样式由两个组成部分：选择器和声明。声明包括属性和属性值。每个声明之后用分号结束
h1 {color:red;font-size:14px}
h1(选择器) color，font-size(属性) red，14px(值)
CSS注释
/*注释*/
二.CSS的几种引入方式
1.行内样式
行内样式是标记的style属性中设定css样式。不推荐大规模使用
<p style='color : red'>Hello world</p>
2.内部样式
嵌入式是将CSS样式集中到写在网页的<head></head>标签对的<style></style>标签对中。格式如下
<head>
<meta charset='utf-8'>
<title>Title</title>
<style>
p{background-color:2b99ff}
</style>
</head>
3.外部样式
外部样式就是将CSS写在一个单独文件中，然后在页面进行引入即可，推荐使用此方式。
<link href='mystyle.css' rel='stylesheet' type='text/css'/>
三.CSS选择器
基本选择器
1.元素选择器
p {color :'red';} #块级P中字体颜色都为红色
2.ID选择器
#i1 {background-color:red} #id=i1 的标签中背景色设置为红色
3.类选择器
.C1 {font-size:14px;} #为c1类的字体都设置为14像素
p.c1 {color:red;} #在块级P中的C1类的字体颜色都设定为红色
注意：
样式类名不要用数字开头(有的浏览器无法识别)
标签中的class属性如果有多个，要用空格分隔
4.通用选择器
* {color:red}: #所有的字体颜色都设置为红色
组合选择器
1.后代选择器
li a {color :green;} #li内部的a标签设置字体颜色为绿色
2、儿子选择器
div>p {font-family:'Arial Black',arial-black,cursive;}
#选择所有父级是div的p元素
3.毗邻选择器
div+p {margin:5px} #选择所有紧接着div元素之后的p元素
4.弟弟选择器
#li~p {border :2px solid royalblue} #li之后所有的兄弟p标签
属性选择器
p[title] {color :red;} #用于选取指定属性的元素
p[title='213'] {color :green;} #用于选取指定属性和值的元素
补充
[title^='hello'] #title属性以hello开头的元素
[title$='hello'] #title属性以hello结束的元素
[title*='hello'] #title属性包含（字符串包含）hello的元素
[title~='hello'] #title属性(有多个值或值以空间分割)中有一个值为hello的元素
分组和嵌套
1.分组
当多个元素的相同的时候，我们没有必要重复的为每一个元素都设置样式，我们可以通过在多个选择器之间使用逗号分割的分组选择器来统一设置元素样式
例如：
div,p {color:red;} #div和p标签统一设置字体为红色
2.嵌套
多种选择器可以混合起来使用，比如：c1类内部所有p标签设置字体颜色为红色
.C1 p {color :red}
伪类选择器
a:link{color：#FF0000} #未访问的链接颜色
a:hover{color:#FF00FF} #鼠标移动到链接上显示的颜色
a:active{color:#0000ff} #选定的链接颜色
a.visited{color:#00ff00} #已经访问的链接颜色
input:focus {outline:none;background-color:#eee} #input输入框获取焦点时的样式
伪元素选择器
1.first-letter
p:first-letter{font-size:48px;color:red;} #给p元素的首字母设置样式
2.before
P:before{content:'*';color:red;} #在每个p元素之前插入内容
3.after
p.after{content:'?';color:green} #在每个P元素之后添加内容
before和after多用于清除浮动
四.选择器的优先级
CSS继承
继承是CSS的一个主要特征，他是依赖于祖先-后代的关系。继承是一种机制，它允许样式不仅可以应用于某个特定的元素，还可以适用于它的后代。例如一个body定义了的字体颜色值也会应用到段落的文本中
body {color:red;}此时页面上的所有表现都会继承body的字体颜色，但是继承优先级是最低级
注意！注意！注意！并不是所有的属性都可以被继承，比如border，margin，padding，background等
选择器的优先级
内联样式>id选择器>类选择器>元素选择器>
同级元素根据离所在元素的距离决定优先级
除此之外可以通过important方式来让样式生效，不推荐使用，过多使用会造成文件混乱不易维护
五.CSS属性相关
标签属性
宽和高
width属性可以为元素设置宽度
height属性可以为元素设置高度
块级标签才能设置宽度，内联标签的宽度由内容决定！！！
字体文本属性
1、字体属性
font-family可以把多个字体名称作为一个“回退”系统来保存。如果浏览器不支持第一个字体，则会尝试下一个。浏览器会使用它可识别的第一个值。
简单实例：
body {font-family: "Microsoft Yahei", "微软雅黑", "Arial", sans-serif}
字体大小
p {font-size: 14px;}
2.字重(粗细)
font-weight 来设置字体的字重
normal 默认值，标准粗细
bold 粗体
bolder 更粗
lighter 更细
100-900 设置具体粗细，400等同于normal，700等同于bold
inherit 继承父类元素字体的粗细值
3.文本颜色
颜色属性被用来设置文字的颜色。
颜色是通过CSS最经常的指定：
十六进制值 - 如: ＃FF0000
一个RGB值 - 如: RGB(255,0,0)
颜色的名称 - 如: red
还有rgba(255,0,0,0.3),第四个值为透明度范围0.0到1.0
4.文字属性
text-align属性规定元素中文本的水平对齐方式
left 左边对齐
right 右边对齐
center 居中
justify 两端对齐
5.文字装饰
text-decoration属性来给文字添加特殊效果
none 默认
underline 下划线
overline 上划线
line-through 删除线
inherit 继承父类中的属性
a {text-decoration：none} 去掉a标签的特殊效果
p {text-indent：32px;} 首行缩进32像素
背景属性
background-color :red; 背景颜色
background-image ：url('xx.png') 背景图片
repeat（默认）：背景图片平铺满整个网页
repeat-x(y):背景图片只在水平(垂直)方向平铺
no-repeat：背景图片不平铺
background-repeat: #不平铺，指定背景位置
background-position: left top; #左边顶部
/*background-position: 200px 200px;*/ #长宽为200像素的地方
支持简写
background:#336699 url('1.png') no-repeat left top;
使用背景图片的一个常见案例就是很多网站会把很多小图标放在一张图片上，然后根据位置去显示图片。减少频繁的图片请求。
案例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>滚动背景图示例</title>
<style>
* {
margin: 0;
}
.box {
width: 100%;
height: 500px;
background: url("http://gss0.baidu.com/94o3dSag_xI4khGko9WTAnF6hhy/zhidao/wh%3D450%2C600/sign=e9952f4a6f09c93d07a706f3aa0dd4ea/4a36acaf2edda3cc5c5bdd6409e93901213f9232.jpg") center center;
background-attachment: fixed;
}
.d1 {
height: 500px;
background-color: tomato;
}
.d2 {
height: 500px;
background-color: steelblue;
}
.d3 {
height: 500px;
background-color: mediumorchid;
}
</style>
</head>
<body>
<div class="d1"></div>
<div class="box"></div>
<div class="d2"></div>
<div class="d3"></div>
</body>
</html>
边框属性
border-width 边框粗细
border-style 边框类型
border-color 边框颜色
#i1 {
border-width: 2px;
border-style: solid;
border-color: red;
}
通常使用简写方式：
#i1 {
border: 2px solid red;
}
边框样式
none 无边框
dotted 点状虚线边框
dashed 矩形虚心边框
solid 实现边框
除了可以统一设置边框外还可以单独为某一个边框设置样式，如下所示：
#i1 {
border-top-style:dotted;
border-top-color: red;
border-right-style:solid;
border-bottom-style:dotted;
border-left-style:none;
}
圆形
border-radius设置设置为长或高的一半就可以得到一个圆心
display属性
用于控制HTML元素的显示效果。
值 意义
display:"none" HTML文档中元素存在，但是在浏览器中不显示。一般用于配合JavaScript代码使用。
display:"block" 默认占满整个页面宽度，如果设置了指定宽度，则会用margin填充剩下的部分。
display:"inline" 按行内元素显示，此时再设置元素的width、height、margin-top、margin-bottom和float属性都不会有什么影响。
display:"inline-block" 使元素同时具有行内元素和块级元素的特点。
display:"none"与visibility:hidden的区别：
visibility:hidden: 可以隐藏某个元素，但隐藏的元素仍需占用与未隐藏之前一样的空间。也就是说，该元素虽然被隐藏了，但仍然会影响布局。
display:none: 可以隐藏某个元素，且隐藏的元素不会占用任何空间。也就是说，该元素不但被隐藏了，而且该元素原本占用的空间也会从页面布局中消失。
