CSS学习笔记（一）

沈辞-

已于 2023-04-04 11:52:33 修改

阅读量53

点赞数

文章标签： css 学习 html

于 2023-04-02 22:35:58 首次发布

本文链接：https://blog.csdn.net/weixin_51178398/article/details/129910732

版权

一.CSS简介

1.HTML的局限性：主要做结构，显示元素内容
2.CSS是层叠样式表的简称，是一种标记语言，用于设置页面中文本内容，图片的外形，以及版面的布局和外观显示样式
3.CSS语法规范
CSS规则主要由两个部分构成：选择器和一条或多条申明；
选择器用于指定CSS样式的HTML标签，花括号内是该对象设置的具体样式；
属性和属性值用键值对的形式出现；
4.CSS代码风格
展开格式（更直观）；小写字母；空格规范；

二.CSS基础选择器

1.选择器的作用：选择标签
2.选择器的分类：
（1）基础选择器
（2）复合选择器
3.基础选择器
①标签选择器：把某一类标签全部选择出来 标签名 {...}
②类选择器(最常用)：差异化选择不同的标签单独选择一个或者某几个标签
语法：需要用class属性设置类名.类名{...}
注意：class命名不要使用中文和数字，尽量使用英文，命名要有意义
多类名：给一个标签指定多个类名，多个类名用空格隔开，class="类名1 类名2"
③id选择器：为标有指定id的HTML元素指定特定的样式,只能调用一次
语法：# id {...}
④通配符选择器:选取页面中所有的元素，不需要调用
语法：* {...}

三.CSS字体属性

1.字体系列
CSS使用font-family定义文本的字体系列；
各种字体之间使用英文状态下的逗号隔开；
一般情况下，如果有空格隔开的多个单词组成的字体，加引号；
在使用多个字体的情况下，有限选择第一个字体，如果电脑上没有安装的话依次选择接下来的字体；

2.字体大小
CSS使用font-size属性定义字体大小；
谷歌浏览器默认字体大小为16px；
标题标签需要单独指定文字大小；
可以给body指定整个页面文字的大小；

3.字体粗细
CSS使用font-weight属性指定字体粗细；
normal：正常（400）
bold：粗体（700）
bolder：特粗
lighter：细体
number：自定义（不跟单位）

4.字体样式
CSS使用font-style设置字体样式；
italic：倾斜
normal：正常

5.字体复合属性：font：font-style font-weight font-size/line-height font-family(次序不能更换，不需要设置的可以省略，字号和字体必须同时出现)

四.文本属性

1.文本颜色：color用于定义文本的颜色（十六进制，RGB代码，预定义的颜色）
2.对齐文本：text-align属性用于设置元素内文本内容的水平对齐方式：left，right，center
3.装饰文本：text-decoration规定对文本的修饰：
none：没有下划线（取消a默认的下划线）
underline：下划线
line-through：删除线
overline：上划线
4.文本缩进：text-indent属性用来指定文本第一行的缩进
相对单位：em缩进当前元素一个文字大小的距离
5.行间距：line-height属性用于设置行间的距离
行间距：上间距+文本高度+下间距

五.CSS的引入方式

1.分类
行内样式表（行内式）
内部样式表（嵌入式）
外部样式表（外链式）
2.内部样式表：将所有CSS放入<style>标签中，<style>理论上可以放在任意地方，一般放在<head>中，方便控制整个页面中的元素样式
3.行内样式表：在元素标签内部的style属性中设定CSS样式，控制当前的标签设置样式，适合修改简单样式
4.外部样式表：适合与样式比较多的情况，核心是样式单独写到CSS文件中，之后把CSS文件引入（最常用）
（1）新建一个后缀名为.css的文件，把所有CSS代码放入文件中
（2）在HTML页面中使用<link>标签引入CSS样式表
代码格式：<link rel="stylesheet" href="css文件路径">