一、基础认知

CSS：层叠样式表（Cascading style sheets）
作用：给页面中的HTML标签设置样式
css 的注释：ctrl + /
css 的引入方式
内嵌式：css 写在 style 标签中

外联式：css 写在一个单独的 .css 文件中【需要通过link标签在网页中引入】
```
<link rel="stylesheet" href="">
```
行内式：css 写在标签的 style 属性中
```
<div style="color: red; font-size: 30px;">这是div标签</div>
```

二、选择器

1. 标签选择器

结构：标签名 { css 属性名: 属性值; }

作用：通过标签名找到页面中所有同名标签，设置样式

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>p {color: red;}</style>
</head>
<body><p>标签选择器测试</p>
</body>
</html>

2. 类选择器

结构：.类名 { css 属性名: 属性值; }
作用：通过类名，找到页面中所有带这个类名的标签，设置样式
```
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>.one {color: red;}</style>
</head>
<body><div class="one">类选择器测试</div>
</body>
</html>
```
1. 所有标签都有 class 属性，class 属性的属性值称为类名
2. 类名可以由数字、字母、下划线、中划线组成，但不能以数字或者中划线开头
3. 一个标签可以同时有多个类名，类名之间以空格隔开
4. 类名可以重复，一个类选择器可以同时选中多个标签

3. id 选择器

结构：#id属性值 { css 属性名: 属性值; }

作用：通过 id 属性值，找到页面中所有带这个 id 属性值的标签，设置样式

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=, initial-scale=1.0"><title>Document</title><style>#two {color: blue;}</style>
</head>
<body><div id="two">测试 id 选择器</div>
</body>
</html>

所有标签都有 id 属性

id 属性值类似于身份证号，在一个页面中是唯一的，不可重复的！

一个标签上只能有一个 id 属性值

一个 id 选择器只能选中一个标签

4. 通配符选择器

结构：* { css 属性名: 属性值; }

作用：找到页面所有标签，设置样式【一般用于去除标签默认的 margin 和 padding】

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=, initial-scale=1.0"><title>Document</title><style>* {color: blue;}</style>
</head>
<body><div id="two">测试通配符选择器</div><p>这是一个标签</p><h1>h1</h1><span>span</span>
</body>
</html>

三、字体和文本样式

1. 字体样式

字体大小：font-size【单位：px；默认 16px 】
字体粗细：font-weight【正常：normal 或者 400；加粗：bold 或者 700】
字体样式：font-style【正常(默认值)：normal；倾斜：italic】
字体类型：font-family【windows 电脑默认字体：微软雅黑】
1. 字体一般分为三类：无衬线字体（sans-serif），衬线字体（serif），等宽字体（monospace）
2. 网页中大多采用无衬线字体（例如：黑体、Arial）
3. 衬线字体报刊书籍中应用广泛（例如：宋体、Times New Roman）
4. 等宽字体一般用于程序代码编写（例如：Consolas、fira code）
字体属性连写（复合属性）：font: style weight size family;【只能省略前两个，如果省略了则保持默认值】
如果给同一个标签设置了相同的属性，此时样式会层叠（覆盖），写在最下面的会生效

2. 文本样式

文本缩进：text-indent

1、数字 + px
2、数字 + em （推荐：1 em = 当前标签的 font-size 的大小）

文本水平对齐方式：text-align

属性值	效果
left	左对齐
center	居中对齐
right	右对齐

1. text-align：center 可以让【文本】【span、a、input、img】标签居中
2. 如果需要让以上元素水平居中，需要给以上元素的父元素设置

文本修饰：text-decoration

属性值	效果
underline	下划线
line-through	删除线
overline	上划线
none	无装饰线

开发中会使用 text-decoration:none; 清除 a 标签默认的下划线

3. line-height 行高

作用：控制一行的上下行间距
取值：【1.数字 + px；2.倍数（当前标签 font-size 的倍数）】
应用和注意点
1. 让单行文本垂直居中可以设置 line-height: 文本父元素高度
2. 网页精准布局时，会设置 line-height: 1可以取消上下间距
3. 同时设置行高和 font 连写：font: style weight size/line-height family;
4. 行高包括：文本高度、上间距、下间距

4. 标签水平居中方法总结

如果需要让 div 、p 、h（大盒子）水平居中可以通过 margin: 0 auto; 实现
如果需要让以上标签水平居中，直接给 当前元素本身 设置即可
margin: 0 auto 一般针对于固定宽度的盒子，如果大盒子没有设置宽度，此时会默认占满父元素的宽度
注意 text-align: center 和 margin: 0 auto 的区别，一个是让内容居中，一个是让标签在页面居中

总结

每天学习一点点，快乐就会多一点
以上就是 CSS相关知识 笔记啦，小梁加油哦！！！

CSS 学习成长笔记（1）相关推荐

CSS 学习成长笔记（3）
CSS Note_3 一.CSS 盒子模型 1. CSS 三大特性 2. CSS 特性之优先级(详细) 3. 盒子模型二.CSS 浮动 1. 结构伪类选择器 2. 伪元素 3. 标准流 4. 浮 ...
前端HTML、CSS学习完整笔记（中上篇）
第21课 inline内联(行内元素) <!DOCTYPE html> <html> <head> <title>study21.html</ti ...
Anker—学习成长笔记
http://www.cnblogs.com/Anker/p/3265058.html
HTML/CSS学习笔记01【概念介绍、基本标签】
w3cschool菜鸟教程.CHM(腾讯微云):https://share.weiyun.com/c1FaX6ZD HTML/CSS学习笔记01[概念介绍.基本标签.表单标签][day01] HTML ...
CSS学习笔记（狂神-完整版）
CSS学习笔记(狂神-完整版) HTML + CSS + JavaScript 结构 + 表现 + 动作 1.什么是CSS 如何学习 CSS是什么 CSS怎么用(快速入门) CSS选择器(重点+难点) ...
每天成长一点---WEB前端学习入门笔记
WEB前端学习入门笔记从今天开始,本人就要学习WEB前端了. 经过老师的建议,说到他每天都会记录下来新的知识点,每天都是在围绕着这些问题来度过,很有必要每天抽出半个小时来写一个知识总结,及时对一天工 ...
CSS学习笔记--浮动元素由于浏览器页面缩小而被挤到下面的解决方法
CSS学习笔记--浮动元素由于浏览器页面缩小而被挤到下面的解决方法参考文章: (1)CSS学习笔记--浮动元素由于浏览器页面缩小而被挤到下面的解决方法 (2)https://www.cnblogs. ...
前端篇--------1.css学习笔记
1.css 单行文本换行溢出解决方案(css三件套) white-space:nowrap overflow:hidden text-overflow:ellipsis 2.css m ...
HTML/CSS学习笔记03【CSS概述、CSS选择器、CSS属性、CSS案例-注册页面】
w3cschool菜鸟教程.CHM(腾讯微云):https://share.weiyun.com/c1FaX6ZD HTML/CSS学习笔记01[概念介绍.基本标签.表单标签][day01] HTML ...

CSS 学习成长笔记（1）

CSS Note_1

一、基础认知

二、选择器

1. 标签选择器

2. 类选择器

3. id 选择器

4. 通配符选择器

三、字体和文本样式

1. 字体样式

2. 文本样式

3. line-height 行高

4. 标签水平居中方法总结

总结

CSS 学习成长笔记（1）相关推荐

最新文章

热门文章