前端三剑客之一 CSS~
一、认识CSS
CSS，即 层叠样式表 ，是 Web 开发中的核心技术之一。它的主要作用是控制 HTML 文档的外观和布局
核心作用：
- 样式与结构分离
CSS 的诞生是为了将页面的内容结构 (HTML) 和视觉样式 (CSS) 分离。这使得 HTML 文档保持简洁，专注于语义，而样式可以独立管理和修改 - 外观控制
CSS 可以精确控制 HTML 元素的一切视觉表现，包括颜色，字体，大小，边距，布局和位置等等 - 层叠性
这是 CSS 最重要的特性。当多个样式规则应用于同一个元素时，CSS 会根据优先级、特殊性和源头等规则，决定最终应用哪个样式
二、基本语法规范
-
在选择器和 { 之间保留一个空格
-
在属性名和 : 之间不留空格
-
在 : 和属性值之间保留一个空格
三、引入方式
- 行内样式
<div style="color: blue;">我是一个div111</div>
2. 内部样式表
<style>p {color: red;}</style>
3. 外部样式表
div {color: purple;font-size: 90px;border: ridge;
}
<link rel="stylesheet" href="test.css">
<p>一个段落</p><div>我是一个div333</div><a href="#" class="red">超链接1</a><a href="#" class="red">超链接2</a><a href="#">超链接3</a><div><span id="span1">111</span><span>222</span><span>333</span></div><div>我是一个div222</div>
四、CSS选择器
1. 标签选择器
a {color: green;}
2.类选择器
.red {color: red;}
3.ID选择器
#span1 {color: blue;}
4.通配符选择器
* {color: red;}
5.复合选择器
div #span1 {color: green;}
五、常用CSS
- color
color: 设置字体颜色
a {color: green;}
- font-size
font-size: 设置字体大小
div #span1 {font-size: 200px;}
- border
border: 边框
边框是一个复合属性, 可以同时设置多个样式, 不分前后顺序, 浏览器会根据设置的值自动判断，通常四个值表示上，右，下，左，3个值表示上，左和右，下，两个值表示上下，左右，一个值表示上下左右
注意：虽然border-width、border-style和 border-color 简写属性接受最多 4 个参数来为不同的边设置宽度、风格和颜色，但 border 属性只接受三个参数，分别是宽度、风格和颜色，所以这样会使得四条边的边框相同
p {border: solid 10px red;}
- width/height
width: 设置宽度
height: 设置高度
只有块级元素可以设置宽高
使用 display 属性可以修改元素的显示模式
display: block 改成块级元素
display: inline 改成行内元素
div {width: 200px;height: 200px;}
- padding和margin
padding: 内边距, 设置内容和边框之间的距离
margin: 外边距, 设置元素和元素之间的距离
#span1 {padding: 200px;margin: 200px;}
本期内容到此为止，喜欢的话请点个赞，谢谢观看！！！