css属性标签小结

css样式的写法格式

• 外链样式-- 通过载入的方式加载css样式，文件后缀名需要是.css，只要在页面加载笨css文件，就可以应用
• 页内样式–直接在本页面内写css样式，所写css只影响本页面，其他页面不受影响
• 行内样式-- 在HTML标签内部，以属性的方式写css样式，只对本标签起作用

四种基础选择器：

• 标签选择器 eg. h1{}
• class选择器 eg. .title{}
• id选择器 eg. #title{}
• 通用选择器 eg. *{}

复合选择器

• 后代选择器 eg. .father .children{}
• 编组选择器 eg. h1,h2,h3, .box, #box{}

伪类选择器

• link 初始样式 eg. a:link{}
• visited 已访问后的样式 eg.a:visited{}
• hover 鼠标移入时的样式 eg. a:hover{}
• active活动样式 eg. a:actived{}

文本样式

属性	名称	值
font-family	字体	中文字体需要嵌套在引号内，多字体使用英文逗号
font-size	字号	number
font-weight	字体粗细	normal/bold/100-900
font-variant	小型大写字母	normal/small-caps
lin-height	行高	number
text-transform	大小写转换	lowercase/capitalize
text-deciration	文本修饰	none /underline/overline/line-through

文本区块

属性	名称	值
letter-spacing	字母间距	number
text-indent	文本的缩进	number
text-align	水平对齐	left/center/right
vertical-align	垂直对齐	baseline/sub/super/top/middle/bottom
display	显示类型	none/block/inline/inline-block

背景样式

• background-color 背景颜色
• background-image 背景图片 图像权重比颜色高
• background-repeat 背景重复 repeat：背景图像在纵向和横向上平铺 no-repeat：背景图像不平铺 repeat-x：背景图像在横向上平铺 repeat-y ：背景图像在纵向上平铺
• background-position 背景定位 background-position：x y x轴可以使用left、center、right或精确值 y轴可以使用top、center、bottom或数值 数值可以是负数
• background-attachment 背景固定 scroll 默认值，随滚动 fixed 不滚动
• background简写，可以互换位置，只要便宜的xy在一起就可以了

盒子模型内边距padding

• padding-top 上内边距
• padding-bottom 下内边距
• padding-left 左内边距
• padding-rigiht 右内边距
• 简写 padding：10px 代表上下左右都是10
• 简写 padding：10px 20px 代表上下10，左右,是20
• 简写 padding：10px 20px 30px 代表上10，左右是20 下是30
• 简写 padding：10px 20px 30px 40px代表上右下左

外边距margin同上
边框：

属性	名称	值
boder-width	表框宽度	number
border-color	边框颜色	颜色值/transparent
boder-style	边框样式	solid/dotted/dashed

简写 border：1px solid red； 单独某一条线 border-top： 1px solid red；添加浮动：

• float：left 向左浮动
• float：right 向右浮动
• float：none 默认 不浮动

清除浮动：

• clear：left 在左侧不允许浮动元素
• clear：right 在右侧不允许浮动元素
• clear：both 在两侧都不允许浮动元素

border-radius格式：

• border-radius：10px 代表四个角都是10
• border-radius：10px 20px 左上右下， 右上左下
• border-radius：10px 20px 30px 左上，右上左下，右下
• border-radius：10px 20px 30px 40px 左上，右上，右下，左下

box-shadow

• box-shadow参数有六个 X轴偏移，Y轴偏移，阴影模糊半径，阴影扩展半径，阴影颜色，阴影类型
• 写法：box-shadow：10px 10px 5px 5px red inset 可以多个阴影叠加

text-shadow

• text-shadow X轴偏移、Y轴偏移、阴影模糊半径、阴影颜色

子元素选择器

• first-child：第一个子元素
• last-child：最后一个子元素
• nth-child（n）第n个子元素
• nth-last-child（n）倒数第n个子元素
• first-of-type 特定类型的首个子元素
• last-of-type 特定类型的最后一个子元素
• nth-of-type（n） 特定类型的某个子元素