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