01.初识CSS

发布于 2022年 04月 12日 16:15

一. css简介

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

二.css的三种引入方式

  • 内联样式(inline style)

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

    • 将样式卸载head里的style里
    • type值类型为==text/css==
  • 外部样式表(external style sheet)

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

三.css的注释

body{
/* css的注释*/
}

四.link元素设置网页图标

  • link元素除了可以外联样式,还可以设置图标
  • 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 规则由两个主要的部分构成:选择器以及一条或多条声明。

  • 选择器是用于指定 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;
}

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

推荐文章