详解CSS

目录

CSS

语法

引入方式

选择器

标签选择器

类选择器

ID选择器

通配符选择器

复合选择器

常用CSS

color

font-size

border

width和height

padding

外边距


CSS

CSS(Cascading Style Sheet),层叠样式表, ⽤于控制⻚⾯的样式.

CSS 能够对⽹⻚中元素位置的排版进⾏像素级精确控制, 实现美化⻚⾯的效果. 能够做到⻚⾯的样式和结构分离.

语法

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

• 选择器决定针对谁修改 (找谁)

• 声明决定修改啥. (⼲啥)

• 声明的属性是键值对. 使⽤ ; 区分键值对, 使⽤ : 区分键和值.

html 复制代码
<style>
    p {
        /* 设置字体颜⾊ */
        color: red;
        /* 设置字体⼤⼩ */
        font-size: 30px;
    }
   </style>
<p>hello</p>
引入方式

|------|---------------------------------|-----------------------------------------------|
| 引入方式 | 语法描述 | 示例 |
| 行内样式 | 在标签内使⽤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选择器主要分以下⼏种:

  1. 标签选择器

  2. class选择器

  3. id选择器

  4. 复合选择器

  5. 通配符选择器

我们通过代码来学习CSS选择器的使⽤.

标签选择器
html 复制代码
/* 选择所有的a标签, 设置颜⾊为红⾊ */
a {
     color: red;
}
/* 选择所有的div标签, 设置颜⾊为绿⾊ */
div {
     color: green;
}
类选择器
html 复制代码
/* 选择class为font32的元素, 设置字体⼤⼩为32px */
.font32 {
     font-size: 32px;
}

⼀个类可以被多个标签使⽤, ⼀个标签也能使⽤多个类(多个类名要使⽤空格分割, 这种做法可以让

代码更好复⽤)

ID选择器
html 复制代码
/* 选择id为submit的元素, 设置颜⾊为红⾊ */
#submit {
     color: red;
}

id 是唯⼀的, 不能被多个标签使⽤ (是和 类选择器 最⼤的区别)

通配符选择器
html 复制代码
/* 设置⻚⾯所有元素, 颜⾊为红⾊*/
* {
     color: red;
}
复合选择器
html 复制代码
/*只设置 ul标签下的 li标签下的 a标签, 颜⾊为红⾊*/
ul li a {
     color: blue;
}
  1. 以上三个标签选择器 ul li a 中的任意, 都可以替换成类选择器, 或者id选择器, 可以是任意选

择器的组合, 也可以是任意数量选择器的组合

  1. 不⼀定是相邻的标签, 也可以是"孙⼦"标签

  2. 如果需要选择多种标签, 可以使⽤ , 分割, 如 p, div { } 表⽰同时选中p标签和div标签.

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

常用CSS
color

color: 设置字体颜⾊

html 复制代码
.text1{
     color: red;
}
font-size

font-size: 设置字体⼤⼩

html 复制代码
.text1{
     font-size: 32px;
}
border

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

html 复制代码
.text{
    border: 1px solid purple;
}

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

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

border: 1px solid purple; 就等同于以下代码:

java 复制代码
.text1 {
     /* border: 1px purple solid; */
     border-width: 1px;
     border-style: solid;
     border-color: purple;
}
width和height

width: 设置宽度

height: 设置⾼度

只有块级元素可以设置宽⾼

块级元素是HTML标签的⼀种显⽰模式, 对应的还有⾏内元素

常⻅块级元素: h1-h6, p, div 等

常⻅⾏内元素: a span

块级元素独占⼀⾏, 可以设置宽⾼

⾏内元素不独占⼀⾏, 不能设置宽⾼

改变显⽰模式

使⽤ display 属性可以修改元素的显⽰模式.

• display: block 改成块级元素 [常⽤]

• display: inline 改成⾏内元素 [很少⽤]

padding

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

内容默认是顶着边框来放置的. ⽤ padding 来控制这个距离。


padding也是⼀个复合样式, 可以对四个⽅向分开设置 :

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

外边距

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

margin也是⼀个复合样式, 可以给四个⽅向都加上外边距

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

相关推荐
gqkmiss21 分钟前
Chrome 浏览器 131 版本开发者工具(DevTools)更新内容
前端·chrome·浏览器·chrome devtools
Summer不秃26 分钟前
Flutter之使用mqtt进行连接和信息传输的使用案例
前端·flutter
旭日猎鹰30 分钟前
Flutter踩坑记录(二)-- GestureDetector+Expanded点击无效果
前端·javascript·flutter
Viktor_Ye37 分钟前
高效集成易快报与金蝶应付单的方案
java·前端·数据库
hummhumm39 分钟前
第 25 章 - Golang 项目结构
java·开发语言·前端·后端·python·elasticsearch·golang
乐闻x1 小时前
Vue.js 性能优化指南:掌握 keep-alive 的使用技巧
前端·vue.js·性能优化
一条晒干的咸魚1 小时前
【Web前端】创建我的第一个 Web 表单
服务器·前端·javascript·json·对象·表单
花海少爷1 小时前
第十章 JavaScript的应用课后习题
开发语言·javascript·ecmascript
Amd7941 小时前
Nuxt.js 应用中的 webpack:compiled 事件钩子
前端·webpack·开发·编译·nuxt.js·事件·钩子
生椰拿铁You2 小时前
09 —— Webpack搭建开发环境
前端·webpack·node.js