01.初识CSS

Jason杰森
208 阅读3分钟

一. css简介

  • CSS的全称是==Cascading Style Sheet==，层叠样式表
  • CSS的作用是：可以给网页中的每一个元素设置样式（“化妆”、排版布局），让网页更加精美
  • 完全没有使用CSS的网页：基本就是一堆从上到下、从左到右挨在一起的文字和图片

image-20210103163104746

二.css的三种引入方式

  • 内联样式（inline style）

    • 内联样式书写：
      • n将样式直接写在元素的style属性上
      • image-20210103163723355
    • CSS样式之间用分号;隔开，建议每条CSS样式后面都加上分号;
    • 在很多国内外资料中，“CSS样式”与“ CSS属性”是同义词
      • p样式名 -> 属性名
      • 样式值 -> 属性值
    • 有些人也把inline翻译为“行内”，其实在这里，用“内联”更合适，表示“内部自带”的意思

  • 文档样式表（document style sheet）、内嵌样式表（embed style sheet）

    • 将样式卸载head里的style里
      • image-20210103164421767
    • type值类型为==text/css==

  • 外部样式表（external style sheet）

    • 将样式写在单独的CSS文件中，然后在当前网页的head元素中用link元素引用
      • image-20210103164528194
    • <link rel="stylesheet">元素的type属性值默认是==text/css==
    • 在CSS文件中使用**@charset**指定文件编码，一般都是UTF-8
      • image-20210103164639990
    • 可以在style元素或者CSS文件中使用@import导入其他的CSS文件
      • image-20210103164704872
      • 不建议使用@import导入CSS文件，它的效率比link元素低

三.css的注释

body{
/* css的注释*/
}

四.link元素设置网页图标

  • link元素除了可以外联样式，还可以设置图标
    • image-20210103165802409
  • link元素的rel属性不能省略，用来指定文档与链接资源的关系
  • 一般rel若确定，相应的type也会默认确定，所以可以省略type
  • 网页图标支持的图片格式是ico、png，常用大小是16x16、24x24、32x32（单位：像素）

五.css简史

  • CSS 1 -> CSS 2 -> CSS 2.1 -> CSS 2.2
  • CSS 3：是CSS 2.x 以后对某一些 CSS模块进行升级更新后的称呼，比如CSS Color Module Level 3、Selectors Level 3、CSS Namespaces Module Level 3。目前并不存在真正意义的CSS 3
  • CSS 4：是CSS 2.x 以后对某一些 CSS模块进行升级更新后的称呼，比如CSS Color Module Level 4、Selectors Level 4、CSS Text Module Level 4。目前并不存在真正意义的CSS 4

六.常用的css属性

6.1 按照CSS属性的具体用途，大致可以分类为：

  • 文本：color、direction、letter-spacing、word-spacing、line-height、text-align、text-indent、text-transform、text-decoration、white-space
  • 字体：font、font-family、font-style、font-size、font-variant、font-weight
  • 背景：background、background-color、background-image、background-repeat、background-attachment、background-position
  • 盒子模型：width、height、border、margin、padding
  • 列表：list-style
  • 表格：border-collapse
  • 显示：display、visibility、overflow、opacity、filter
  • 定位： vertical-align、position、left、top、right、bottom、float、clear

七.CSS语法

7.1 CSS语法规范

使用 HTML 时，需要遵从一定的规范，CSS 也是如此。要想熟练地使用 CSS 对网页进行修饰，首先需要了解CSS 样式规则。 CSS 规则由两个主要的部分构成：选择器以及一条或多条声明。

image-20210429182304623

  • 选择器是用于指定 CSS 样式的 HTML 标签，花括号内是对该对象设置的具体样式
  • 属性和属性值以“键值对”的形式出现
  • 属性是对指定的对象设置的样式属性，例如字体大小、文本颜色等
  • 属性和属性值之间用英文“:”分开
  • 多个“键值对”之间用英文“;”进行区分所有的样式，都包含在 标签内，表示是样式表。 一般写到 上方。
<head>
    <style>
        h4 {
            color: blue;
            font-size: 100px;
        }
    </style>
</head>

7.2 CSS代码风格

7.2.1 样式格式书写

  • 紧凑格式

    • h3 { color: deeppink;font-size: 20px;}

  • 展开格式

    • h3 {
    color: pink;
    font-size: 20px;
}

强烈推荐第二种格式， 因为更直观。

7.2.2 样式大小写

  • h3 {
   color: pink;
}

  • H3 {
    COLOR: PINK;
}

强烈推荐样式选择器，属性名，属性值关键字全部使用小写字母，特殊情况除外。

7.2.3 空格规范

h3 {
    color: pink;
}

① ==属性值前面，冒号后面，保留一个空格== ②==选择器（标签）和大括号中间保留空格==

avatar
文章
阅读
粉丝