更多优质内容
请关注公众号
请关注公众号
一、CSS概念：
什么是CSS,CSS说白了就是给页面添加样式,让整个页面变的好看起来的一种东西,用来定义网页外观，如字体、背景、颜色等
二、在页面中使用css的3种常用方式
1.行内样式
就是在一个标签内使用 style 属性,仅为某一个标签添加样式
例如
<p style="font-size:16px">文字</p>
2.内嵌式
就是将样式写在<style>标签中
<style>
ul{
list-style:none;
}
</style>
3.外链式
<link rel="stylesheet" href="./1.css" type="text/css">
三种方式的优先级: 行内样式最高,其他方式则取决于放置的先后顺序,后面的会覆盖前面的
三、基本语法
1. CSS语法
选择器： 负责圈定范围，要修改的元素的集合
声明 ： 由属性和属性名组成，中间用冒号隔开(属性名:属性值)，用于设定具体的样式
格式 ： 选择器{属性1:值; 属性2:值; 属性3:值 ....}
2. CSS注释
样式里面注释就一种 /*注释 */
html中的注释 <!-- -->
3. 单位
3.1 长度单位
em 倍数 相对于默认字体大小16px
px 像素 pixel 屏幕上显示的最小单位(推荐)
% 百分比 设置font-size 相对于默认字体大小16px 设置宽度高度相对于父元素宽度
pt 标准长度单位 1pt=1/72英寸 用于印刷业， 非常简单易用
PPI(DPI) 每英寸像素点数 pixel(dot) per inch 表示清晰度、精度
cm/mm 厘米/毫米
附公式：px = pt * DPI /72
3.2 颜色单位
① 英文单词 red green yellow .....
② 十六进制 #rrggbb 00-ff
③ rgb 数字 百分比 rgb(0~255, 0~255, 0~255)
④ rgb(0%~100%,0%~100%,0%~100%)
四 选择器
1. HTML选择器
标签名{ }
2. ID选择器
#ID名{ }
一个页面一个ID名只能给一个元素
3. CLASS选择器
.class名{ }
4. 关联选择器
选择器 选择器{ }
5. 组合选择器
选择器,选择器,选择器....{ }
6. 伪元素选择器(IE6 仅支持a标签)
选择器:hover 鼠标悬停在上面(重用)
选择器:active 鼠标点击的时候
选择器:visited 鼠标点击过后
选择器:link 开始状态
选择器补充：
1. 元素选择符
通配符选择符*{
padding:0;}
类型选择符
ID选择符
类选择符
2. 关系选择符
包含选择符 E F
子选择符 E>F
相邻选择符 E+F
兄弟选择符 E~F
3. 属性选择符
E[attr]
E[attr=""]
E[attr^=""]
E[attr$=""]
E[attr*=""]
E[attr~=""]
E[attr|=""]
4. 伪类选择符
E:link 鼠标没有放上去时
E:visited 访问完后
E:hover 鼠标放上去时
E:active 点击时
E:focus 获取焦点时
E:lang(fr)
E:not(s) 除了
E:root
E:first-child
E:last-child
E:only-child
E:nth-child(n)
E:nth-last-child(n)
E:first-of-type
E:last-of-type
E:only-of-type
E:nth-of-type(n)
E:nth-last-of-type(n)
E:checked
E:disabled
E:enabled
E:target
5. 伪对象选择符
E::first-letter
E::first-line
E::after
E::before
E::input-placeholder (加私有前缀)
E::selection
五 CSS常见属性和值
1. 字体属性
font 设置字体所有的属性 font:[font-style] || [font-weight] || [font-variant] ? <font-size> <font-family>
font-family 设置字体库(黑体 宋体 微软雅黑.....)
font-size 设置大小(px em % pt in cm mm)
font-style 设置字体风格 值： normal（正常 默认） italic（斜体） oblique（斜体）
font-weight 设置字体粗细 值： normal（默认） bold（粗） bolder（更粗） lighter（细） 100-900（数值大于600是加粗）
font-variant 设置字体变形 normal small-caps(小写变大写)
2. 颜色属性
color 设置字体颜色(四种表示颜色的方法)
3. 背景属性
background
综合写法
background: [color] [image] [repeat] [position] [attachment]
background-color 设置背景颜色 颜色单位
background-image 设置背景图片 url('地址')
background-repeat 设置背景图片平铺方式 repeat(默认值) no-repeat repeat-x repeat-y
background-attachment 设置背景图片附加信息 值： scroll（默认） fixed
background-position 设置背景图片位置 left/right/center/number px top/center/bottom/number px
4. 文本属性
letter-spacing 字母与字母之间的间距
word-spacing 单词与单词之间的间距
text-decoration 对文本划线的控制 overline 上划线 underline 下划线 line-through 中划线 none 没有线
text-align 文本的水平对齐方式 left right center justify
vertical-align 文本的垂直对齐方式,不太常用,一般文本的垂直对齐我们使用的是行高=框的高度 baseline | sub | super | top | text-top | middle | bottom | text-bottom | <percentage> | <length>
text-indent 首行缩进
line-height 重要 文本的垂直对齐方式
word-wrap 当一个单词到达边际时没显示完的处理方式
normal 溢出 break-word 换行显示
text-transform 大小写转换 none capitalize 首字母大写 uppercase 全部大写 lowercase 全部小写
5. 边框属性
综合写法
border :边框宽度 边框样式 边框颜色
border :10px solid red
[ border-width ]： 设置或检索对象边框宽度。
[ border-style ]： 设置或检索对象边框样式。
[ border-color ]： 设置或检索对象边框颜色。
border-left:
border-left-style:
border-left-color:
border-left-width:
border-right:
border-top:
border-bottom:
6. 鼠标光标属性
cursor 设置或检索在对象上移动的鼠标指针采用何种系统预定义的光标形状。
属性值 auto pointer move crosshair wait help text not-allowed
7. 列表属性
[ list-style-type ]： 设置或检索对象的列表项所使用的预设标记
[ list-style-image ]： 设置或检索作为对象的列表项标记的图像
[ list-style-position ]： 设置或检索作为对象的列表项标记如何根据文本排列
list-style 综合写法
list-style：[ list-style-image ] || [ list-style-position ] || [ list-style-type ]
一般给一个列表中的列表项添加图片使用的是背景图片的方式
8. 表格属性 width height border.....
1)table-layout 固定每列的宽度
属性值
auto： 不固定
fixed： 固定
2)border-collapse 设置或检索单元格的边框是否合并
属性值
separate： 边框独立 默认值 不合并
collapse： 相邻边被合并 合并
3)border-spacing：单元格的边框与边框之间的距离
只有border-collapse的属性值是separate：的时候,border-spacing属性才能生效
4)caption-side：top | right | bottom | left
设置或检索表格的caption标题在哪个方向显示
5)empty-cells 当单元的内容为空是,是否显示边框
属性值有两个 show 默认值显示 hide 不显示
