CSS 入门


2020/6/2 HTML CSS

为网页添加样式

初识CSS

h1 {
    color: white;
    background-color: red;
    text-align: center;
}
1
2
3
4
5

以上代码为一条css规则;

包含: 选择器 + 声明块

术语解释

  • 选择器: 用来选择元素
    • 元素选择器: 直接写元素名称,选中所有相关元素。选择范围过广;
    • id选择器:前面加#, 选中指定id唯一的元素。选择范围过小;
    • 类选择器**[推荐]**:前面加., 选中一类元素。选择范围比较灵活。短横线连接命名法;
  • 声明块: 声明样式
    • 声明块中包含很多属性,以分号结束
    • 每一个声明表示某一个属性

书写位置

  • 内联样式表**[不推荐]**:inline style="color:black"

  • 内部样式表:

  • 外部样式表**[推荐]**:css文件引用。写在独立的css文件中

    link是空元素

    推荐使用外部样式表的原因:

    • 可以解决多页面样式重复/共用的问题

    • 有利于浏览器缓存,从而提高页面响应速度

    • 代码分离(HTML和CSS),更容易阅读和维护

    如果样式在200行以内,可以尝试使用内部样式表。少读一个文件。提高首次响应速度。

常见样式申明

color

  • 预设值color: blue
  • 三原色,色值:rgb(1,2,3) rgba(红,绿,蓝,透明) 每种颜色0~255之间的数字来表达;可以用调色板来选择颜色
  • hex(16进制): #红绿蓝 每两位表示一个颜色
  • 常见颜色:
    • 淘宝红 #ff4400, 可简写为 #f40;
    • 黑色 #000000, #000
    • 白色 #ffffff, #fff
    • 红色 #f00 ; 绿色 #0f0, 蓝色 #00f, 紫色#f0f, 黄#ff0, 情色#00f
    • 灰色 #ccc;

background-color

  • 元素背景颜色

font-size

  • 元素内部文字尺寸大小

      - px: 像素大小。
      
      - em: 相对单位,相对于父元素的字体大小。父元素没有设置字体大小,会继承父元素的字体大小。html最顶端没有字体大小。使用基准字号,在浏览器设置中确定,一般为14px。
      
      - User Agent, UA, 浏览器。 user agent stylesheet。 浏览器默认样式表
    

font-weight

文字粗细程度,可以取数字,页可以为预设值。 需要字体文件取适配

  • normal -> 400;
  • bold -> 700;

strong 元素表示强调, 。

font-family

文字类型,需要在用户的计算机中存在的字体;可以设置多个字体,适配问题

  • Arial
  • consolas
  • font-family:翩翩体-简;
  • sans-serif: 非衬线字体。 边缘没有修饰。
  • 宋体:衬线字体打印出来比较好看

font-family:consolas,Arial,微软雅黑,sans-serif;

最后加上一个让系统选择一个默认的衬线字体。程序会依次查找。

font-style

字体样式, 斜体

font-style:italic

<i></i>默认样式为倾斜字体。通常用它表示一个图标。标准,是用特殊的语调朗读内容,

em 元素 也是斜体

text-decoration

给文字加线。

text-decoration:line-through 中间加线 underline 底下加线(超级链接的样式)

  • a元素, 有下划线
  • del元素表示错误的内容 Text that has removed during edit<del>test del element</del>,错误或者废弃的内容, 中间加删除线;
  • s元素表示过期的内容 Text that is out dated

text-indent

首行文本缩进.属性值可以是 10px; 或者 2em;

line-height

行高。和文字框有关。一行文本有多高。

行高常见的两种用法:

  1. 单行文本:设置行高为容器的高度。可以让单行文本垂直居中.
  2. 多行文本:

多行文本line-height 一般不用绝对值。

line-height=1.5, 表示相对于当前元素的字体大小。 通常不用em

width/height

像素

letter-space

文字间隙。像素px或em

text-align

元素内部的文字水平排列方式

left/center/right

选择器

目标是精准的选择想要的元素

简单选择器

  • ID选择器

  • 元素选择器

  • 类选择器

  • 通配符选择器

    * 星号表示选择所有元素。包括head,body

  • 属性选择器

    根据属性名和属性值来选择元素。

    [href]{color:red;} 具有href属性的元素;

    [href="Https://www.sina.com"]{color: red} 具有特定属性值的元素;

    ^= 表示开始, $=表示结束

    详细可以参考 https://developer.mozilla.org/zh-CN/docs/Learn/CSS/Building_blocks/Selectors/Attribute_selectors

  • 伪类选择器

选择某些元素的某种状

a:hover

移动到所有元素上都变成红色
:hover {
color:red;
}
/选中鼠标悬停时候的a元素/
a:hover{
    color:red
}
1
2
3
4
5
6
7
8

a:active

指鼠标按下去时候的状态

a:link: 超级链接没有被访问时候的状态

a:visited :超级链接访问后的颜色

4个属性编写的顺序 link, visited, hover, active

爱恨法则: love hate;

:first-child

:last-child

  • 伪元素选择器

通常用于选中某个元素内的第一个或最后一个

:: before 在所选元素的最前面生成一个子元素。

span::before{
	content:"《"
}
span::after{
    content:"》"
}
帮你生产一个新元素
1
2
3
4
5
6
7

选择器的组合

  • 多个选择器放一起,表示并且。

  • 后代元素 -- 空格连接 【用的最多】

  • 子元素 -- >

  • 相邻的下一个兄弟元素 -- +

  • 后面出现的所有兄弟元素 -- ~

选择器的并列

多个选择器用逗号分隔,

层叠【基础知识】

声明冲突:同一个样式,多次用到同一个元素;

层叠:解决声明冲突的过程。浏览器自动处理 (权重计算)

比较重要性

  • 重要性从高到低
    • 作者样式表 !important样式(开发者书写的样式) {color:red !important}
    • 作者样式表中的普通样式
    • 浏览器默认样式表中的样式

比较特殊性

  • 看选择器

    总体规则:选择器选中的范围越窄,越特殊 内联>ID > 类 > 元素 选择

    通过选择器计算出一个4位数 XXXX

    1. 千位:如果是内联样式,记作1,否则记0
    2. 百位:选择器中id选择器的数量
    3. 十位:类选择器、属性选择器、伪类选择器的数量
    4. 个位:元素选择器,伪元素选择器的数量

比较源次序

代码靠后的胜出

层叠的应用

  1. 重置样式表。

    • 书写一些作者样式。覆盖浏览器的默认样式。reset.css mystyle.css 常见的重置样式表:

      • normalize.css
      • reset.css
      • meyer.css
  2. 爱恨法则:

    • link visited hover active

继承

Last Updated: 10/1/2020, 11:04:14 AM