前端星-02：了解css

穹高jones0820
214 阅读3分钟

什么是css?

Cascading Style Sheet,用来定义页面元素样式（包括字体、颜色、位置、大小、动画等）。

结构?

//一条规则
选择器 {
    //一条声明
    属性:属性值;
}

如何使用?

  • 外联
<link rel='stylesheet' href='xxx.css'>
  • 内联
<p style='margin:0;'></p>
  • 嵌入
<style></style>

如何工作?

浏览器渲染过程：
加载html文件->解析html->创建dom树
加载css文件->解析css->创建cssom树
合并dom树和cssom树创建渲染树->展示页面

选择器selector

  1. 通配选择器*

  2. 标签选择器，直接写标签名

  3. id选择器，id前加#，id必须唯一

  4. 类选择器，class值前加.

  5. 属性选择器

    • 属性=属性值写在[]中
    • 没有属性值的，将属性名称写在[]中
    • 属性值匹配：a[href^='#']表示a标签中href属性值以#开头的元素。$结尾

  6. 伪类选择器

    • 状态伪类：例如a标签中
      • a:link表示正常显示的状态
      • a:visited表示已经访问过的状态
      • a:hover表示鼠标划过的状态
      • a:active表示鼠标点击的状态
      • input:focus表示input标签获取焦点时的状态
    • 结构性伪类：例如多个li标签中
      • li:first-child表示位置为第一个的li标签
      • li:last-child表示位置为最后一个的li标签

  7. 组合选择器

  8. 选择器组，多个选择器之间逗号隔开

颜色

  1. RGB写法：rgb(0,0,0)参数为光学三原色（红、绿、蓝）分别的含量值，最大为255，最小为0；也可写成十六进制#000000
  2. HSL写法:hsl(0,0%,0%)分别表示色相（0~360）、饱和度（0~100%）、亮度（0~100%）
  3. keyword写法：red直接表示红色，色度不能精确选择
  4. alpha透明度（0~1），可组合rgb写法或hsl写法rgba(0,0,0,1) hsla(0,0%,0%,1)

字体

font-family

  1. 可设置多个字体适配不同的设备及浏览器
  2. 通用字体族：sarif,用来在找不到设置的字体后从类似风格字体组中找一个代替
  3. 英文字体放在中文字体前面
  4. web-fonts外部引入字体，在css中通过@font-face来定义，src的url()引入字体文件

font-size

  1. 关键字small medium large
  2. 像素px em表示相对于父元素像素的倍数
  3. 百分比%相对于父元素的百分比

font-style，默认为normal,italic斜体
font-wight，100~900，normal（400）,bold（700），可能不支持除normal和bold的粗细

位置

line-height:行高，可设置像素，或值（表示相对于自身font-size的倍数）
text-align:对齐，left\right\center\justify
letter-spacing:字符间距，word-spacing:单词间距，用像素设置
text-indent:缩进
text-decoration:文本装饰，none\underline\line-through\overline white-space:空格设置，normal(多个空格合并为一个)\nowrap(不换行)\pre(保留原始空格和换行)\pre-line(合并空格，保留换行)\pre-wrap(自动换行)

avatar
文章
阅读
粉丝