[TOC]
# 1. css样式的几种引入方式
## 1.1外部样式表
~~~
<link rel="stylesheet" type="text/css" href="/c5.css">
内部样式表（位于 标签内部）
<style>
p{color:pink;font-size:16px}
</style>
~~~
## 1.2内联样式（在 HTML 元素内部）
`<p style="color:pink;font-size:16px">hello world</p>`
给同一选择器设置同一样式,离元素近的样式设置方式优先级高
# 2.css基本样式
## 2.1背景
~~~
背景颜色:background-color
背景图片:backgorund-image
背景重复:background-repeat
背景位置:background-position: x y
//第一个参数表示离x轴的距离,y表示离y轴的距离
//简写
background: color image repeat position
背景吸附:background-attachment:fixed | scroll
background-size
//指定背景图片大小。
background-size: x y;
//x表示宽度，y表示高度
background-size:cover;
此时会保持图像的纵横比并将图像缩放成将完全覆盖背景定位区域的最小大小。
相当于background-size:100% 100%;
~~~
## 2.2文本
~~~
text-align文本对齐方式
text-align: right|left|center
text-decoration文本修饰
text-decoration: underline|overline|line-through
text-indent文本缩进
text-transform文本转换(了解)
text-transform:uppercase|lowercase|capitalize
~~~
## 2.3字体
~~~
color:设置字体的颜色
颜色是通过CSS最经常的指定：
十六进制值 - 如: ＃FF0000
一个RGB值 - 如: RGB(255,0,0)
颜色的名称 - 如: red
body {color:red;}
h1 {color:#00ff00;}
h2 {color:rgb(255,0,0);}
~~~
~~~
//font-family 属性应该设置几个字体名称作为一种"后备"机制，如果浏览器不支持第一种字体，他将尝试下一种字体
p{font-family:Helvetica,Microsoft YaHei}
~~~
推荐使用简书的
`font-family: -apple-system,SF UI Text,Arial,PingFang SC,Hiragino Sans GB,Microsoft YaHei,WenQuanYi Micro Hei,sans-serif;`
~~~
font-size
font-style:normal | italic
font-weight:normal | bold | lighter
行高
line-height
~~~
## 2.4链接
~~~
a:link - 正常，未访问过的链接
a:visited - 用户已访问过的链接
a:hover - 当用户鼠标放在链接上时
a:active - 链接被点击的那一刻
//*若单独设置几个链接，必须遵守如下规则：
a:hover 必须跟在 a:link 和 a:visited后面
a:active 必须跟在 a:hover后面
~~~
## 2.5列表(针对ul)
~~~
list-style:none;
list-style-type:circle|square
list-style-image:url("xxx")
~~~
## 2.6边框
~~~
border-width 边框的宽度
border-style 边框的样式
border-color 边框的颜色
~~~
~~~
//可以简写成
border： width style color
p{border:1px solid #333}
~~~
~~~
//边框-单独设置各边
p
{
border-top:1px solid #ccc;
}
~~~
## 2.7表格
~~~
border-collapse
//设置表格的边框被折叠成一个单一的边框
table{border-collapse:collapse}
~~~
~~~
//可以在td,th设置这个两个属性
colspan:value //跨越的列
rowspan:value //跨越的行
~~~
## 2.8轮廓（了解）
~~~
//轮廓（outline）是绘制于元素周围的一条线，位于边框边缘的外围，可起到突出元素的作用
p{outline:1px solid pink}
~~~
## 2.9透明
**opacity
`visibility:hidden|visible和display:none的区别`
# 3.css样式的继承
继承:是子元素对父元素的继承
## 3.1width和height
~~~
width
如果子元素不设置宽度，默认情况下继承父元素的宽度
~~~
~~~
Height(特殊)
如果父元素不设置高度，默认情况下父元素继承子元素的高度
~~~
## 3.2css可以继承的属性
~~~
//文本相关属性
color,text-align,text-decoration,text-transform,text-indent(内联标签不能设置此属性)
~~~
~~~
//字体相关属性
font-family,font-style,font-size,font-weight,line-height
~~~
~~~
//列表相关属性
list-style
~~~
~~~
//表格相关属性
border-collapse
~~~
~~~
//其他属性
cursor,visibility
~~~
# 4.常用的css样式
~~~
color:设置文字的颜色
width:设置一个元素的宽度
height:设置一个元素的高度
background-color:设置背景颜色
background-image:设置一个元素的背景图片
line-height:设置文字的行高
text-align:设置文字对其的方式
border-width:边框的宽度
border-style:边框的样式
border-color:边框的颜色
p:hover{color:blue}当鼠标移动到元素上时可以改变元素的css样式
~~~
