【CSS】基本样式

CSS

（层叠样式表）

1、css引入方式

• 行内式：结构与表现混合，不利于维护，代码可读性差，样式重用性也差
• 内嵌式：提高多个标签对样式的重用性
• 外链式：可以被多个文件重用

<link rel="stylesheet" type="text/css" href="./css/   "/>

样式优先级:最晚优先，就近原则
!important>行内>内嵌>外链
!important：优先级最大，无穷大

2、基本选择器

• 标签选择器：选择所有符合条件的标签
• id选择器：唯一不重复 #id名
• 并集选择器 A,B
• 通配符选择器 *代表所有标签

3、层次选择器

• 子代选择器 E>F E的儿子是F
• 后代选择器 E F:E的所有后代F
• 兄弟选择器 E+F E的第一个兄弟F

5、字体样式font-

谷歌默认大小为16px
font-size：20px；

• 字体粗细：值100-900
  bold / bolder：粗/更粗
  light / lighter：细/更细
  normal：正常，等于不设置
  font-weight：normal；
• 字体风格：
  normal：正常，等于不设置
  italic：倾斜，利用字体本身的倾斜特性
  oblique：倾斜，外力作用
  font-style：italic；
• 字体类型：
  多个类型用逗号隔开，中文字体写在英文字体后
  font-family：‘Times New Roman’,“宋体”,“楷体”;
• 综合设置：风格 粗细 大小 类型
  font：italic normal 20px ‘Times New Roman’,“宋体”,“楷体”

6、文本样式text-

• 文本缩进
  text-indent：2em；

• 文本水平对齐方式
  text-align：center；

• 行高
  line-height： px；

• 文本居中对齐方式：
  1、只设置行高 2、高度与行高保持一致

• 文本装饰
  text-decoration：line-through；
  underline：下划线 overline：上划线
  line-through：删除线 none：去除线

• 图片和文字水平对齐方式
  vertical-algin：middle；
  vertical-algin：只能在行内块元素上有效
  baseline：基线对齐
  middle：中线对齐
  text-top：顶线对齐

3、外溢

• 外溢
  overflow：auto；
  visible：原样显示 hidden：将多余的隐藏
  scroll：产生滚动条 auto：自适应，需要就产生滚动条

文本不换行 white-space：nowrap；
文本省略 text-overflow：ellipsis；
必须配合white-space和overflow使用
white-space：nowrap；
overflow：auto；
text-overflow：ellipsis；

4、颜色与单位

1em=一个字号大小（默认16px）
段落首行缩进 text-indent:2em；

1byte=8bite
1kb=1024byte
1MB=1024KB
00000000=0
1111  1111=1*2^0+1*2^1+...+1*2^7=255
15     15 =FF
十六进制:0-9 A-F 

颜色表示：单词
红绿蓝配色
rgb（255,255,255）白色
rgb（255，0，0）红色
十六进制#FFFFFFF

5、选择器基本命名规范

1个单词 （wrapper）
2个单词以上：第一个单词小写其他单词首字母大写，驼峰命名
或下划线连接 （wrapper_nav）
不能是关键字