CSS

user7060287311459
156 阅读4分钟

CSS语法规范

由两部分组成：选择器以及一条或多条声明

SmartSelect_20211103-124849_HD.jpg

代码风格

1、样式格式书写
    展开格式
    h3{
        color: pink;
        font_size: 20px;
      }
2、使用小写字母
3、空格规范
    属性值前面，冒号后面保留一个空格
    选择器和大括号之间有空格

CSS选择器

选择器作用

根据不同需求把不同的标签选出来，就是选择标签用的

选择器分类

  • 基础选择器 标签选择器 类选择器 id选择器 通配符选择器

  • 复合选择器

标签选择器

类选择器


.类名 {
    属性1： 属性值；
    属性2： 属性值；
     }
<div class="red"></div>
就是所有class为red都会变，多个都可以使用相同的class
不要使用纯数字、中文等进行命名，尽量使用纯英文

多类名
        可以给一个标签多个类名
        class="er hi"
        多个类名之间用空格隔开
多类名使用场景：
        可以把一些标签元素相同的样式（共同的部分）放到一个类里面
        这些标签可以调用这个公共的类，然后再调用自己独有的类
        从而节省CSS代码，修改更加方便

id选择器

#id名 {
    属性1：属性值1；
    属性2：属性值2；
    }
每个标签的id不能一样

类选择器和id选择器的区别

  • 同一个类名可以多次使用，同一个id名只能一个标签使用
  • 类选择器在修改样式中用的最多，id选择器一般用于页面上唯一性的元素上，经常和javaScript搭配使用

通配符选择器

选中页面中的所有元素

* {
    属性1： 属性值1；
    属性2： 属性值2；
    }
 
特殊情况下使用，下面是清除所有元素标签内外边距
* {
   margin: 0;
   padding: 0;
   }

CSS字体属性

字体

css使用font-family属性定义文本中字体的系列

p { front-family: "微软雅黑“；}
div {front-family: Arial, "Microsoft Yahei", "微软雅黑";}

各种字体之间必须使用英文状态下的逗号隔开
一般情况下，如果有空格隔开多个单词组成的字体，加引号，单引和双引都可以
尽量使用系统默认自带字体，保证在任何浏览器中都能正确显示

多个字体，是从第一个字体中开始选择，如果所有字体都没有则采用系统自带的字体
通常可以设置在body上面

字体大小

font-size
p {
    font-size: 20px;
    }
标题标签比较特殊，需要单独指定大小

字体粗细

font-weight

属性值                    描述
normal                   默认值（不加粗）
bold                     定义粗细（加粗的）
bolder                   更粗
light                    变细
100-900                  400等同于normal，而700等同于bold,后面不用加单位

字体样式

font-style

属性值                         描述
normal                         默认值，不倾斜
italic                         斜体

复合属性

是为了将上面的文字属性合起来
格式：
font: font-style font-weight font-size/line-height font-family
即
font: italic 700 16px "Microsoft yahei";
或者只写最后两个
font: 16px "Microsoft yahei";

不能更换顺序
不需要设置的属性可以省略（默认值），但是必须保留font-size和font-family属性，否则会出错

CSS文本属性

文本颜色

div {
        color: red;
    }

三种表示颜色的方式：预定义颜色值，red\green
                  十六进制：#FF0000
                  RGB代码： rgb(255,0,0)
               开发中最常使用RGB

对齐文本

div{
        text-align: center;
  }

属性值                 解释
 left                 左对齐（默认值）
 right                右对齐
 center               居中对齐

装饰文本

div{
        text-decoration: underline;
   }

属性值                描述
none                 默认，没有
underline            下划线
overline             上划线
line-through         删除线

文本缩进

text-indent属性用来指定文本第一行缩进，通常是将段落的首行进行缩进

div{
    text-indent: 10px;
    }
这个缩进长度可以是负值

p{
    text-indent: 2em;
   }
em是一个相对单位，就是当前元素1个文字大小，如果当前元素没有设置大小，则会按照默认值。

行间距

p{
    line-height: 26px;
    }3dx

SmartSelect_20211104-142304_HD.jpg

CSS引入方式

  1. 内部样式表
写到html页面内部，将所有的CSS代码抽取出来，单独放到<style>标签中
<style>标签理论上可以放到HTML文档的任何地方，但一般会放到文档<head>标签中
通过此种方式可以控制整个页面
代码结构清晰，但是并没有实现结构与样式完全分离
使用内部样式表设定CSS，通常也称为嵌入引用，这种方式是练习的时候最常使用的

2、行内样式表

在元素标签内部的style属性中设定CSS样式，适合修改简单样式
<div style="color: red; font-size: 12px;"></div>

3、外部样式表

单独写到CSS文件中

引入：
<link rel="stylesheet" href="CSS文件路径">
放到</head>上面
avatar
文章
阅读
粉丝