01 基本CSS （基本选择器）

日嗯任
199 阅读4分钟

什么是css

美化网页，布局页面

CSS语法规范

选择器 {
    样式属性：值
 }

给div 修改样式，给它高度，宽度，背景颜色

  • 属性和属性之间用 分号进行分割 ;
  • 属性和值之间用 冒号 :
image.png image.png

css代码风格

  1. 样式格式书写

紧凑格式

image.png

展开格式 （推荐） 更直观

image.png
  1. 样式大小写

推荐用小写 ！！

  1. 空格规范

在这两处都要加空格

image.png

选择器的作用

根据不同需求把不同的标签选出来

css基础选择器

基础选择器 : 由 单个选择器组成的

标签选择器 （元素选择器）

就是 html 标签名

image.png

优点 ：

  • 把页面中同类型的标签设置为统一样式

缺点：

  • 不能只给其中一个设置 ，要改全部都要改

类选择器 （class选择器）

构成 ： . 自己起的类名{}

作用 ：可以单独选择一个或者某几个标签

.类名{
    属性1：属性值1;
    ......
}

一个有class ，一个没有class

image.png image.png

注意 ：

  • 类名是自定义的 ，最好不要设置为标签名等一些特殊的名称 ，
  • 类名比较长的话，可以使用 - 来连接 。 eg：word-mulid
  • 不要使用 纯数字，中文来命名 ，尽量用英文来命名
  • 命名要有意义 ， 可以让自己一下就看出这是什么意思

多类名

就是 一个标签有多个名字 一样

类名和类名之间用 空格 隔开 image.png

image.png
多类名使用场景

在后面 需要很多的 css样式时，若每一个都要写，css样式会很多， 可以把相同的样式写在一起，这样既方便又简单

id选择器

和 class选择器差不多 ， 不过 id选择器 是 #

image.png

和 class选择器的区别是 ：class选择器可以让多人调用，而id选择器只能调用一次

就相当于 ：世界上可以有很多人叫 刘波 ，但每一个刘波的身份证号码是不一样的

通配符选择器

用 * 定义 ，意思是 选取页面中所有的元素（标签）

image.png

image.png

设置字体样式

字体系列 font-family

  • 字体可以写中文，也可以写英文，推荐用 英文 写
  • 不知道的 可以到 w3schoo 上面去搜 ，不同的字体
  • 可以使用多个字体 ， 不同的用 逗号 隔开
  • 尽量使用 默认字体
image.png

image.png

字号大小 font-size

image.png

image.png

  • px 是 像素单位 ， 一定要加
  • 标题标签(h1~h6) 的 样式比较特殊，需要 具体指定大小

字体粗细 font-weight

normal : 正常的  相当于 数字为400
bold : 粗体  相当于 数字为700
bolder ： 特粗体
lighter : 细体
number（推荐用这个） : （可以设置数字） 100 | 200 | 300 | .... | 900  （后面不需要跟px）

image.png

image.png

字体样式 font-style

italic : 斜体
normal : 不倾斜   默认

image.png

image.png

font复合属性写法

若想设置 一个字体 为倾斜，加粗，文字大小为30px ，那么可以使用简写的形式

顺序不能错误

（顺序不能错 加不加粗 字体粗细 字号大小 是宋体还是什么体）
font : font-style（可以省略） font-weight（可以省略） font-size（必须写）/font-height font-family（必须写）

image.png

image.png

设置文本样式

颜色 color

可以使用 颜色的英文 ，也可以使用 16进制数（最常用的） eg ： #ff0000 image.png

文本水平对齐方式 text-align

只能设置 水平对齐方式

center : 居中
left ： 左对齐 （默认）
right ： 右对齐

image.png

image.png

文本装饰 text-decoration

给文本的修饰 ，下划线，删除线，上划线啥的

none ： 没有 （默认）
underline : 下划线
overline ： 上划线 （几乎不用）
line-through : 删除线（不常用）

image.png

image.png

因为 a链接 自带下划线，所以想要删除a链接的下划线，可以使用none

image.png

image.png

文本缩进 text-indent 只设置首行缩进多少

image.png

image.png

用px 有些尺寸大小不规则 ，所以我们使用em ； em ：是相对于自身来说的一个单位 ，若自身没有设置 font-size ，那么就按照父元素的来看 ，父元素默认是 16px

image.png

行间距 line-height

是设置 每行之间的高度 ，写px像素即可

行高 组成 ： 上间距 + 文本高度 + 下间距

行高 变大变小 改的其实都是上间距 和下间距 ，因为默认的文本高度是 16px

image.png

css的三种引入方式

根据css 书写的不同位置

内部样式表 （嵌入式）

都 放到 style里面 ， 而style 理论上可以放到任何地方，但我们一般放到head里面

image.png

行内样式表 （行内式）

（修改 简单样式的时候 ，才用这个）

放到 html 标签里面即可 image.png

外部样式表 （链接式）

适合于样式非常多的时候

在外部单独创建一个css文件，在html进行引入

1.创建css文件

image.png

  1. 在 html 将那些引入 使用link 引入

image.png

chrome调试工具调试样式

打开调试工具

  1. 方法1 ： f12 打开 调试工具

image.png

  1. 右键 点击 检查 也可以打开

image.png

使用 调试工具

可以 在调试工具更改 元素的css ，然后在 代码中进行修改 调试工具 只能进行调试，并不能修改

image.png
avatar
文章
阅读
粉丝