前端小入门——CSS

目录

一、什么是CSS？

1.1 css介绍

1.2 基础语法规范

1.3 引入方式

二、CSS选择器 

2.1 标签选择器

2.2 类选择器

2.3 ID选择器

2.4 通配符选择器

2.5 复合选择器 

三、常用css

3.1 color

3.2 font-size

3.3 border 

3.4 width/height

3.5 padding 

3.6 外边距

---

一、什么是CSS？

1.1 css介绍

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

1.2 基础语法规范

选择器 + {一条/N条声明}

• 选择器决定针对谁修改 (找谁)
• 声明决定修改啥
• 声明的属性是键值对。用区分键值对, 使用区分键和值。

<style>
   p {
       /* 设置字体颜⾊ */
        color: red;
       /* 设置字体⼤⼩ */
       font-size: 30px;
   }
</style>
<p>hello</p>

CSS 要写到 style 标签中。

style 标签可以放到页面任意位置，一般放到 head 标签内。

CSS 使用 /* */ 作为注释，(使用 ctrl + / 快速切换) 。

1.3 引入方式

引入方式	语法描述	示例
行内样式	在标签内使用style属性，属性值是css属性键值对	<div style="color:green">绿色</div>
内部样式	定义<style>标签，在标签内部定义css样式	<style>h1 {......}</style>
外部样式	定义<link>标签，通过href属性引入外部css 文件	<link rel="stylesheet" href="[CSS文件路径“>

3种引入方式对比：

1.  内部样式会出现大量的代码冗余，不方便后期的维护，所以不常用。
2.  行内样式，只适合于写简单样式。只针对某个标签生效。缺点是不能写太复杂的样式。
3. 外部样式，html和css实现了完全的分离， 企业开发常用方式。

二、CSS选择器 

CSS 选择器的主要功能就是选中页面指定的标签元素，选中了元素, 才可以设置元素的属性。

<div class="font32">我是⼀个div, class为font32</div>
<div class="font32">我是⼀个div, class为font32</div>
<div><a href="#">我是⼀个div</a></div>
<ul>
 <li>aaa</li>
 <li>bbb</li>
 <li><a href="#">ccc</a></li>
</ul>
<ol>
 <li>1111</li>
 <li>2222</li>
 <li>3333</li>
</ol>
<button id="submit">提交</button>

2.1 标签选择器

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

2.2 类选择器

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

一个类可以被多个标签使用，一个标签也能使用多个类(多个类名要使用空格分割， 这种做法可以让代码更好复用)

2.3 ID选择器

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

id 是唯一的, 不能被多个标签使用 (是和类选择器最大的区别) 

2.4 通配符选择器

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

2.5 复合选择器 

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

• 以上三个标签选择器 ul li a 中的任意，都可以替换成类选择器，或者id选择器，可以是任意选择器的组合，也可以是任意数量选择器的组合；
•  不⼀定是相邻的标签, 也可以是"孙子"标签；
• 如果需要选择多种标签, 可以使用分割, 如 p, div { } 表示同时选中p标签和div标签。

逗号前后可以是以上任意选择器， 也可以是选择器的组合。

三、常用css

<div class="text1">我是⽂本1</div>

3.1 color

color: 设置字体颜色

.text1{
 color: red;
}

颜色有如下几种表达方式:

• 英文单词，如red，blue
• rgb代码的颜色，如rgb(255,0,0)
•  十六进制的颜色，如#ff00ff

3.2 font-size

font-size用于设置字体大小。

.text1{
 font-size: 32px;
}

3.3 border 

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

.text1{
 border: 1px solid purple;
}

以上border属性的对应设置的维度分别为边框粗细，边框样式，边框颜色。也可以拆开来设置。

样式	说明	取值
border-width	设置边框粗细	数值
border-style	设置边框样式	dotted : 点状 solid : 实线 double : 双线 dashed: 虚线
border-color	设置边框颜色	同color

3.4 width/height

width: 设置宽度，height: 设置高度。只有块级元素可以设置宽高。

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

3.5 padding 

padding: 内边距，设置内容和边框之间的距离。内容默认是顶着边框来放置的。用padding 来控制这个距离。

.text1{
 padding: 20px;
}

padding也是一个复合样式，可以对四个方向分开设置。

• padding-top
• padding-bottom
• padding-left
• padding-right

3.6 外边距

margin: 外边距，设置元素和元素之间的距离

.text1{
 margin: 20px;
}

margin也是一个复合样式，可以给四个方向都加上外边距。

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