【css学习整理】css基础(样式,语法,选择器)

　　CSS是什么?

• cascading 层叠样式表
• sheet 样式文件
• style 外观个性化

　　CSS语法?

• 声明方法: 选择器(属性: 值; 属性: 值)
• 选择器: 通过名称制定对哪些标签进行样式设置, 每一对属性之间用分号,属性与值之间用冒号
• css注释: /* 注释内容 */ 不管是单行还是多行,都只有这一种方法

　　CSS基本选择器?

• style属性,行内样式,直接写在标签里,  style="font-size:20px; color: blue;"
• 标签选择器: 直接针对HTML标签设置样式   <style type="text/css"> p{color:red;font-size:30px;}</style>
• ID选择器: 以#开头,名称以字母开头,区分大小写   #test{color:red;}         <p id="test">hello world</p>
• 类选择器: 以" . "开头,后跟类名,规范:以小写字母开始   .test{color:aqua;}  <p class="test"> hello world</p>
• 通配符选择器: *{css规则} 针对当前页面所用的标签应用同样的样式(对标签的初始化),例如: *{margin: 0;padding: 0;border:0}
• 关联选择器: p .aa{} 表示p标签下面的aa类选择器     p>aa{} 表示p标签下的子级  p.aa 同时具备p和aa的标签
• 伪类选择器: 类有一个状态,可以被多个元素访问,超链接有4个状态,其它标记只能支持hover 
  • :link   正常链接的时候
  • :visited 已经点击访问完的状态
  • :hover 当鼠标移上去的状态
  • :active 当鼠标点击下去的状态

　　按CSS位置来分类样式?

• 内嵌样式,在HTML页面中以<style>开头
• 外部样式,引入外部css
  • 链接的形式: <link rel="stylesheet" type="text/css" href="static/css/home.css">
  • 导入 @import url ("/static/css/home.css")
  • 链接样式和导入样式的区别, import既能在HTML中引入样式,也能在css样式文件中导入外部样式,链接样式只能在HTML页面中引入样式。

　　css文本属性

• color: 文本颜色,单词,16进制
• text-align: 文本对齐方式  left right center
• line-height: 行高,设置垂直方向居中,所在容器元素的高度与line-height保持一致
• text-indent: 缩进,例如: 2em
• letter-spacing: 字间距
• text-decoration: 文本描述,修饰: underline 下划线, overline上划线, none
• css列表属性: list-style: none