CSS博客

1.1 CSS介绍

1.CSS(Cascading Style Sheet)，层叠样式表, ⽤于控制⻚⾯的样式.
2.CSS能够对网页中元素位置的排版进行像素级别的精确控制，实现美化页面的效果。能够做到页面的样式和结构的分离。

1.2 基本语法规则：选择器 + {⼀条/N条声明}

1.选择器决定针对谁修改 (找谁)
2.声明决定修改啥. (⼲啥)
3.声明的属性是键值对. 使⽤ ; 区分键值对, 使⽤ : 区分键和值

<style>
    p{
       /* 设置字体颜色 */
        color:red;
       /* 设置字体大小 */
        font-szie: 30px;
     }
</style>

<p>hello</p>

注意：

CSS要写到style标签中，style标签可以放到页面任意位置，一般放到head标签内，CSS使用/* */作为注释

1.3 引入方式

1. 内部样式会出现⼤量的代码冗余, 不方便后期的维护，所以不常用. (课堂上为了方便讲解, 使⽤该⽅式)
2. 行内样式, 只适合于写简单样式. 只针对某个标签⽣效. 缺点是不能写太复杂的样式.
   3.外部样式，html和css实现了完全的分离, 企业开发常用方式.

1.4 规则

开发时统一用小写，冒号后面带空格，选择器和{之间也有一个空格。

2.1标签选择器

/* 选择所有的a标签, 设置颜⾊为红⾊ */
 a {
 color: red;
 }

 /* 选择所有的div标签, 设置颜⾊为绿⾊ */
 div {
 color: green;
 }

2.2class选择器

 /* 选择class为font32的元素, 设置字体⼤⼩为32px */
 .font32 {
 font-size: 32px;
 }

2.3id选择器

/* 选择id为submit的元素, 设置颜⾊为红⾊ */
#submit {
 color: red;
}

2.4复合选择器

/* 设置⻚⾯所有元素, 颜⾊为红⾊*/
* {
 color: red;
}

2.5通配符选择器

/*只设置 ul标签下的 li标签下的 a标签, 颜⾊为红⾊*/
ul li a {
 color: blue;
}

3.1 color：设置字体颜色

.text1{
 color: red;
}

3.2 font-size：设置字体大小

.text1{
 font-size: 32px;
}

3.3 border：边框是⼀个复合属性, 可以同时设置多个样式, 不分前后顺序, 浏览器会根据设置的值自动判断

text1{
 border: 1px solid purple;
}

.text1 {
 /* border: 1px purple solid; */
 border-width: 1px;
 border-style: solid;
 border-color: purple;
}

3.4 width/height： 设置宽度/设置高度

.text1 {
 width: 200px;
 height: 100px;
}

3.5 padding： 内边距, 设置内容和边框之间的距离.

text1 {
 padding: 20px;
}

padding也是⼀个复合样式, 可以对四个方向分开设置
padding-top
padding-bottom
padding-left
padding-right

3.6 外边距: 设置元素和元素之间的距离.

.text1 {
 margin: 20px;
}

margin-top
margin-bottom
margin-left
margin-right