一、CSS简介和基本概念
1、CSS(层叠样式表,Cascading Style Sheets)
是一种用于描述网页内容外观和样式的标记语言,它与HTML结合使用,控制网页中各个元素的样式、布局和设计。
2、css的作用
CSS的作用是将网页内容和样式分离,使得开发者可以更灵活地控制网页的外观,同时提高网站的可维护性和可重用性。
- 网页内容:网页内容指的是网页中实际显示给用户的信息和元素,包括文字、图片、视频、链接等。在HTML(超文本标记语言)中,网页内容通过不同的标签来表示和组织,如
表示段落、表示图片、< a >表示链接等。网页内容是用户访问网页时所看到的主要信息和数据。
- 网页样式:网页样式指的是网页内容的外观设计和布局,包括文字颜色、字体样式、边距、背景颜色、元素大小等方面。样式通过CSS(层叠样式表)来控制和定义,可以使网页内容更加美观、易读和具有吸引力。通过CSS,开发者可以调整网页元素的样式以及整体布局,从而实现定制化的外观效果。
3.CSS语法和规则
- 选择器:用于选择要应用样式的HTML元素,如标签选择器(< p >)、类选择器(.classname)、ID选择器(#idname)等。
- 属性和值:每条CSS规则由一个属性和一个属性值组成,用于定义元素的样式,如color: red;中,color为属性,red为值。
- 声明块:CSS规则由选择器和一组声明块组成,每个声明块包含一个或多个属性-值对,用花括号{}包围起来。
- 样式表:CSS样式可以直接写在HTML文件中的< style >标签内,也可以作为外部样式表引入HTML文档中。
- 层叠顺序:当多条样式规则作用于同一个元素时,根据层叠顺序和特异度(specificity)来确定最终生效的样式。
- 继承:某些样式会被子元素继承,例如字体样式通常会被子元素继承,可以通过inherit关键字明确指定继承。
- 盒模型:元素在页面中被表示为矩形盒子,包括内容区域、内边距、边框、外边距,CSS可以用来控制这些盒子的大小和间距。
二、css的编写方式
1. 优先级最高的是行内样式
- 直接使用style属性写在开始标签中
- 针对一个标签
2. 内部样式表
- 在head标签中使用style标签包裹
- 样式选择器{ 样式选择器 }
- 针对当前html内所有满足的标签
3. 外部样式表
- 写在css文件中,通过link引入html
- 一般先引入外部样式表,再编写内部样式表
- 针对多个html
三、css选择器
1、4种基本选择器
- #id名: id选择器; 匹配拥有id的标签.
- .类名: 类名选择器; 匹配拥有相同类名的标签.
- 标签名: 标签选择器; 匹配固定标签名.
- *: 通配符选择器; 选择所有标签.
- 匹配顺序: #id名、.class名、标签、*.
2、5种符号选择器
- ,: 逗号左右满足一个即可
- 即满足的都可以有此属性
- 作用:逗号用于同时选择多个不同的选择器,将样式应用于这些选择器所匹配的所有元素。
- 空格: 子孙选择器
- 选择的是父亲的子孙,父亲的性质不变
- 作用:空格用于选择元素的后代(包括嵌套元素)。选择器之间的空格表示父元素与子孙元素之间的关系。 例:#hot .p1 .info a
-
: 子级选择器
- 作用:大于号表示选择器之间的直接父子关系,只会选中作为前一项选择器的直接子元素。
- +: 相邻下一个
- 大框架隔开的不能算
- 作用:加号表示选择器之间的相邻兄弟关系,选中紧接在前一项选择器后面的兄弟元素。
- ~: 下面的多个
作用:波浪号表示选择器之间的通用兄弟关系,选中与前一项选择器匹配元素具有相同父元素的所有兄弟元素。
3、其他选择器
- 属性
- [attr]: 拥有属性
- [attr=]: 拥有属性并且值等于
- [attr^=]:拥有属性并且值以……开头
- [attr$=]: 拥有属性并且值以……结尾
- 伪类:在正常使用选择器之后使用
- 状态
- :hover: 鼠标划入
- :active: 鼠标点下
注意划入要在点下之前
- 顺序
- :first-of-type: 第一个
- : last-of-type:最后一个
- : nth-of-type(n): 正数第n个
- : nth-last-of-type(n):倒数第n个
- n从1开始:odd,奇数;even,偶数;
- 状态
三、 css样式属性
1、 字体属性 font-
- family: 类型, 多个字体使用逗号隔开
- size: 大小,默认16px
- weight: 粗细; 400: normal; 700: bold;
- style: intalic,斜体
2、 文本属性 text-
- text-transform: 更改大小写
- capitalize: 首字母大写
- lowercase: 全小写
- uppercase:全大写
- text-align: 对齐
- left: 默认
- center: 居中
- right: 居右
- text-indent: 缩进
- 2em: 2*font-size
- decoration:none; 对于媒体标签去除下划线
3、 背景属性 background
- width和height属性
- background-color: 背景色
- image:图片;优先级高于背景色
- repeat:重复
- no-repeat:不使用no-repeat会重复背景
- repeat配合其他性质使用
- position:位置
- 位置可以绝对也可以相对
- 位置分为宽高
- left、right、center、bottom、top
- 100px 500px
- size:
- 100%
- contain
- 长边展示,短边补充空白;相当于100%
- cover:短边展示,多余长边舍弃
4、 列表属性 list-style
- type
- none:无;优先级比list-style低
- circle:空心圆
- disc:实心圆
- square:方块
- lower-alpha:小写字母
- lower-roman:罗马数字
- upper-alpha:大写字母
- position
- outside:序号在外侧
- inside:序号在内侧
- image:url
- list-style:none
- 作用于ul,ol,li
四、 布局相关
1、 css包围盒
盒模型是CSS中用来描述网页元素在页面中所占空间的模型。
每个HTML元素都被看作是一个矩形的盒子,这个盒子包括了内容区域、内边距、边框和外边距等部分。
盒模型属性用来控制和调整这些部分的大小和间距,从而影响元素在页面中的布局和样式。
- border(边框)上下左右
- 作用:border 用于设置元素的边框样式、宽度和颜色。
- 属性
- width
- style:bashed虚线;solid实线
- color
- 可以集中写多个性质:2px solid red
- padding(内边距)
- 内补:只有宽度
- 作用:padding 用于设置元素内容与其边框之间的空白区域,即内边距。
- 使用自己的背景色
- margin(外边距)
- 外补
- 只有宽度
- 作用:margin 用于设置元素与其他元素之间的空白区域,即外边距。
使用父元素背景色
margin可以共享 - 例:margin:0 auto;使其中的元素始终居中
- padding与margin支持四种写法
- 一个数值:上下左右一样
- 两个数值:上下, 左右
- 三个数值:上, 左右, 下
- 四个数值: 上,右, 下, 左
- 更改包围盒计算方式 box-sizing
- border-box
- box-sizing:border-box;给定宽高包含边框 和 内补
- 包括了内容区域、内边距和边框,但不包括外边距
- content-box默认
- 仅包括内容区域
- border-box
2、 css中的显示(display)
不同性质之间可以相互转换
- inline:行内元素,不可以给宽高
- block:块元素,占一行,可以给宽高
- inline-block:行内块,多个块在一行,可以给定宽高
- none:隐藏
- 例:div:hover+img{其中是img的性质}
3、 css的定位(position)
- static:静态定位,从左到右,从上到下
- relative:相对定位,相对于文档流静态定位,反生偏移
- 相对于静态位置的位置移动
- left
- top
- 相对于静态位置的位置移动
- absolute:绝对定位
- 参考位置:外层第一个非static的标签发生偏移,直到html
- 不占用文档流
- left/top/right/bottom
- fixed:固定定位
- 配合top或bottm使用
- 参考位置:浏览器窗口
- sticky:粘性定位
- 没有达到粘性位置:相当于静态定位
- 到达粘性位置:相当于固定定位
- 设置bottom和top
4、css浮动与清除
通过设置元素的 float 属性,可以使元素沿着其容器的左侧或右侧浮动
- float
- left: 靠左侧排列
- 排列在上一个左浮动的右侧
- right: 靠右排列
- 排列在上一个右浮动的左侧
- left: 靠左侧排列
当父元素包含浮动的子元素时,可能会导致父元素无法正确计算高度,出现高度塌陷的情况。
- clear
- left: 左侧不能有左浮动
- right: 右侧不能有右浮动
- both: 后续元素不会被浮动元素覆盖
- 例:如果某个元素单独占一行,可以float和clear相同方向。如:float left;clear left;
4、 弹性盒模型(Flexbox)
控制主轴方向的属性通常用于 flex 布局,即display:flex;
flex 容器:flexbox弹性容器
- flex-direction: 设置主轴方向
- row: 主轴方向与文档流方向相同(默认值)
- row-reverse: 主轴方向与文档流方向相反。
- column: 主轴方向垂直于文档流方向。
- column-reverse: 主轴方向垂直于文档流方向,且方向相反。
- flex-wrap
- wrap: 默认值,表示项目不换行,所有项目将尽量排在一条线上。
- no-wrap: 表示项目在必要的时候换行,第一行在上方。
- wrap-reverse: 表示项目在必要的时候换行,第一行在下方。
- justify-content
控制 flex 容器中的子元素在主轴(水平方向)上的对齐方式的属性- flex-start: 与主轴开始的位置对齐
- flex-end: 与主轴结束位置对齐
- center: 主轴居中对齐
- space-bewteen: 沿主轴均匀分布排列,首尾没有空白
- space-around: 沿主轴均匀分布排列,两侧有相等的空白空间
- align-content
控制 flex 容器中多行子元素在交叉轴(垂直方向)上的对齐方式的属性- flex-start: 交叉轴起始位置; 没有空白; 多行子元素在交叉轴的起始位置紧凑排列。
- flex-end: 多行子元素在交叉轴的末尾位置紧凑排列。
- center: 多行子元素在交叉轴的中间位置紧凑排列。
- space-between: 多行子元素在交叉轴上均匀分布排列,首尾没有空白。
- space-around: 多行子元素在交叉轴上均匀分布排列,两侧有相等的空白空间。
- 当交叉轴有多行,使用多轴对其设置
- align-items
控制 flex 容器中的子元素在交叉轴(垂直方向)上的对齐方式的属性- flex-start: 从交叉轴起始位置
- flex-end: 从交叉轴结束
- center: 居中
- 当交叉轴方向只有一行使用交叉轴
五、 常用例子
1、评星
设置background-position:10%;
2、字体图标
- 使用font class类型
<!-- 先引入所使用的字体图标文件 -->
<!-- 使用前需要将css和ttf拷贝到同一个文件夹中 -->
<link rel="stylesheet" href="./font/iconfont.css">
<!-- 需要先使用iconfont,再使用字体特有的class名 -->
<span class="iconfont icon-gouwuche"></span>
- 使用unicode自定义类型
在style中使用font-face,并设置字体名称;在对应的class或id中引用
<style>
@font-face{
font-family:"python2401";
src:url(./font/iconfont.ttf) format('truetype');
}
.myfont{
font-family: "python2401" !important;
}
</style>
<!-- 每种字体都有自己的编码 -->
<span class="myfont"></span>
3、渐变
1、transition:过渡
- 可使用的属性
- width、height、background-color、opacity、transform……
- transform:
- translate:平移元素,可以指定水平和垂直方向的位移,如 translateX 和 translateY。
- rotate:旋转元素,可以指定旋转的角度,正值为顺时针旋转,负值为逆时针旋转。
- scale:缩放元素,可以指定水平和垂直方向的缩放比例,如 scaleX 和 scaleY。
- skew:倾斜元素,可以指定水平和垂直方向的倾斜角度,如 skewX 和 skewY。
- 例: transform: rotate(45deg); /* 将元素顺时针旋转45度 */
- transition 属性包含以下几个参数:
- transition-property:指定需要过渡的 CSS 属性的名称。
- transition-duration:指定过渡效果持续的时间。
- transition-timing-function:控制过渡期间属性值的变化速度。
- ease:默认值,缓慢加速,然后缓慢减速的过渡效果,是一种常用的时间函数。
- linear:匀速过渡,属性值均匀变化,没有加速或减速的效果。
- transition-delay:指定过渡效果延迟开始的时间。
- 例子: /* transition要写在原始状态下 */
- transition: all 1s linear;
1、 动画
- @keyframes 自定义动画名{0%{transform} 100%{transform} }
- 类名/id名{animation:自定义动画名 时间 动画方式 无限循环 反向旋转}
自定义的动画名要一致
<style>
@keyframes myrotation{
0%{
transform: rotate(0deg);
}
100%{
transform: rotate(360deg);
}
}
.animation{
width: 64px;
height: 64px;
animation: myrotation 1s linear infinite reverse;
}
@keyframes myrote{
0%{
transform: rotate(0deg);
}
100%{
transform: rotate(360deg);
}
}
</style>