本文详细介绍了CSS的四种使用方式：直接定义样式、内部样式表、嵌入式外部样式表和链表外部样式表，并探讨了选择器的种类，包括基础选择器（标签、类、ID和通配符选择器）、复合选择器（后代、子、并集和伪类选择器）。此外，还讲解了常用的CSS元素属性，如字体、文本、背景、圆角矩形和元素显示模式，以及盒模型的概念和应用。最后，简述了弹性布局（Flexbox）的基本概念和常用属性。
一.CSS的使用方式
1.直接定义标记的style属性
打印结果
2.定义内部样式表
打印结果
3.嵌入式外部样式表
打印结果
4.链表外部样式表
二.选择器的种类
1.基础选择器
由单个选择器构成的
1.1 标签选择器
1.2 类选择器
打印结果
1.3 id选择器
1.4.通配符选择器
使用*的定义.选择所有的标签
2.复合选择器
2.1后代选择器
又叫包含选择器:选择某个元素父元素中的某个子元素
元素1 元素2 {样式声明}
元素1和元素2要使用空格分割 元素1是父级元素,元素2是子级元素,只选择元素2不会影响元素1
实例1:
实例2;
实例3
2.2子选择器
和后代选择器类似,但是只能选择子标签
元素1>元素2
使用大于号分割
只选亲儿子,不选孙子元素
实例1
2.3并集选择器
用于多组标签
元素1,元素2{ 样式声明 }
通过逗号分割多个元素
表示同时选中元素1和元素2
任何基础选择器都可以同时使用并集选择器
并集选择器建议竖着写,每个选择器占一行.
2.4伪装选择器
1.链接伪装选择器
2.focus伪装选择器
选取获取焦点的input表单元素
三.常用元素属性
1 字体属性
字体名称可以用中午,但是不建议
1.1.字体大小 font-size
1.2.字体粗细 font-weight
1.3.字体样式 font-style
2 文本属性
2.1文本颜色
color属性值的写法:
1.颜色的单纯 2.#+8位16进制的形式 3.RGB方式
2.2文本对齐 test-align
2.3文本装饰text-decoration
2.4文本缩进text-indent
输入的属性值可以是长度单位,可以是百分百单位. 注:要是想要首行缩进2格,可以为2em
2.5行距line-height
3.背景属性
3.1背景颜色 background-color
3.2背景图片background-image:url()
3.3背景平铺background-repeat
3.4背景位置background-position:x y
3.5背景尺寸background-size
属性值:length| percentage| cover| contain
可以填具体的数值: 如 40px 60px 表示宽度为 40px, 高度为 60px
也可以填百分比:按照父元素的尺寸设置.
cover: 景图像扩展至足够大，以使背景图像完全覆盖背景区域。背景图像的某些部分也许无 法显示在背景定位区域中。
contain:把图像图像扩展至最大尺寸，以使其宽度和高度完全适应内容区域.
4.圆角矩形
基本用法:border-radius:length;
length表示内切圆的半径,length越大,弧度越大 
4.1 生成圆形
让border-radius的值为正方形宽度的一半即可
4.2生成圆角矩形
让border-radius的值为矩形高度的一半即可
展开写法
boder-radius是一个复合写法:实际上可以针对四个角分别设置.
border-radius:2em; 等价于
- border-top-left-radius:2em;
- border-top-right-radius:2em;
- border-bottom-right-radius:2em;
- border-bottom-left-radius:2em;
border-radius:10px 20px 30px 40px
- border-top-left-radius:10px
- border-top-right-radius:20px
- border-bottom-right-radius:30px
- border-bottom-left-radius:40px
5.元素的显示模式
5.1 块级元素
常见的元素:h1~h6 p div ul ol li
特点
- 独占一行
- 高度,宽度,内外边距,行高都可以控制
- 宽度默认是父级元素宽度的100%(和父元素一样宽)
- 是一个容器(盒子),里面可以放行内和块级元素.
注意事项
- 文字类的元素内不能使用块级元素
- p标签主要用于存放文字,内部不能放块级元素,尤其是div
5.2 行内元素/内联元素
常见的元素:a strong b em i del ul span
- 不独占一行,一行可以显示多个
- 设置高度,宽度,行高无效
- 左右外边距有效(上下无效),内边距有效.
- 默认宽度就是本身的内容
- 行内元素只能 容纳文本和其他行内元素,不能放块级元素.
注意事项
- a标签中不能再放a标签(虽然chrome不报错,但是最好不要这么做)
- a标签可以放块级元素,但是建议先把a转换成块级元素
5.3 行内元素和块级元素的区别
- 块级元素独占一行,行内元素不独占一行
- 块级元素可以设置高宽,行内元素不能设置宽高
- 块级元素四个方向都能设置内外边距,行内元素垂直方向不能设置.
5.4 改变显示模式
- display:block改成块级元素(常用)
- display:inline改成行内元素(很少用)
- display:inline-block改成行内块级元素
6.盒模型
每一个HTML元素就相当于是一个矩形的盒子
这个盒子由几个部分构成:
- 边框 border
- 内容 content
- 内边距 padding
- 外边距 margin
6.1边框
基础属性
以上代码中可以简写:没有顺序要求
边框会撑大盒子
设置200*200变成了220*220因为算上边框的距离
解决办法:
6.2 内边距
padding设置内容和边框之间的距离
基础属性
复合写法
6.3 外边距
基础属性
复合写法
块级元素水平居中
三种写法
- margin-left:auto; margin-right:auto;
- margin:auto;
- margin: 0 auto;
注意事项
- 这个水平居中的方式和text-align不一样.margin-auto是给块级元素用得到.text-align:center是让行内元素或者行内块级元素居中.
- 对于垂直居中,不能使用"上下margin为auto"的方式
去除浏览器的默认样式
浏览器会给元素加上一些默认的样式,尤其是内外边距.不同浏览器的默认样式存在差别,为了保证代码在不同的浏览器都按照统一的样式显示,往往我们会去除浏览器默认样式
7.弹性布局
7.1flex布局基本概念
flex是flexible box的缩写.意思为"弹性盒子" 任何一个html元素,都可以指定为display:flex完成弹性布局.flex布局的本质是给父盒子添加display:flex属性,来控制盒子的位置和排列方式.
基本概念:
- 被设置为display:flex属性的元素称为flex container
- 它所有子元素立刻称为了该容器的成员称为flex item
- flex item可以纵向排列,也可以横向排列,称为flex direction(主轴)
注:当父元素设置为display:flex之后,子元素的float,clear,vertical-align都会失效
7.2常见属性
justify-content
设置主轴上 的子元素排列方式.
align-items
注:align-items只能针对单行元素来实现,如果有多行元素,就使用item-contents
140
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
