前端基础之CSS
- CSS简介
- 语法结构
- 语法注释
- 多种引入css的方式
- head内style标签内部直接编写css代码
- head内link标签引入外部css文件
- 标签内部通过style属性直接编写
- CSS查找标签之基本选择器
- 标签选择器(范围查找)
- 类选择器(范围查找)
- id选择器(精确查找)
- 通用选择器
- CSS查找标签之组合选择器
- 儿子选择器
- 后代选择器
- 毗邻选择器
- 弟弟选择器
- 属性选择器
- 方式一:直接通过属性名查找
- 方式二:属性名是type并且值是text的标签
- 方式三:属性名是type并且值是text的div标签
- 分组与嵌套
- 分组
- 嵌套
- 伪类选择器
- 鼠标悬浮
- 获取聚点
- 伪元素选择器
- 使用场景
- 修改首个字体样式
- 在文本开头添加内容
- 在文本结尾添加内容
- 选择器优先级
- 相同选择器
- 不同选择器
- css修改字体属性
- 文字字体
- 字体大小
- 字体粗细
- 字体颜色
- 方式1
- 方式2
- 方式3
- css修改文字属性
- 文字对齐
- 文字装饰
- 首行缩进
- css修改背景属性
- 背景颜色
- 背景图片
- css修改边框属性
- 自定义调整每个边的边框
- 统一调整每个边的边框
- 画圆
- css修改dispaly属性
- 盒子模型
- padding用法
- 浮动
- 浮动的作用
- 浮动的影响
- 解决浮动的影响
- 溢出属性
- 文本内容超出了标签的最大范围
- 溢出实际案例
- 定位属性
- 定位的状态
- 定位操作
- z-index属性
- 自定义博客页面
CSS简介
语法结构
选择器 {属性名1:属性值1;属性名2:属性值2}
语法注释
/*注释内容*/
eg:
/*网站大标题*/
/*导航条样式*/
/*登录框样式*/
多种引入css的方式
head内style标签内部直接编写css代码
特点是方便查看
head内link标签引入外部css文件
最常用的方式
标签内部通过style属性直接编写
因将HTML和CSS柔和到一起，增加了耦合度，不推荐使用
CSS查找标签之基本选择器
标签选择器(范围查找)
直接通过标签名查找标签
点击查看代码
Title
震惊,某一线城市居然……
好消息，某地出台大动作……
类选择器(范围查找)
通过标签的class属性查找标签
点击查看代码
Title
震惊,今天某地大雨……
好消息，某地出台大动作……
为提升金融机构外汇资金运用能力，中国人民银行决定，自2022年5月15日起，下调金融机构外汇存款准备金率1个百分点，即外汇存款准备金率由现行的9%下调至8%。
id选择器(精确查找)
通过标签的id属性查找标签
点击查看代码
Title
震惊,今天某地大雨……
好消息，某地出台大动作……
为提升金融机构外汇资金运用能力，中国人民银行决定，自2022年5月15日起，下调金融机构外汇存款准备金率1个百分点，即外汇存款准备金率由现行的9%下调至8%。
通用选择器
查找所有的标签
点击查看代码
Title
震惊,今天某地大雨……
好消息，某地出台大动作……
为提升金融机构外汇资金运用能力，中国人民银行决定，自2022年5月15日起，下调金融机构外汇存款准备金率1个百分点，即外汇存款准备金率由现行的9%下调至8%。
CSS查找标签之组合选择器
儿子选择器
点击查看代码
Title
div1
p1
span1
p2
span3
p3
div2
span2
后代选择器
点击查看代码
Title
div1
p1
span1
p2
span3
p3
div2
span2
毗邻选择器
点击查看代码
Title
div1
p1
span1
p2
span3
p3
div2
span2
弟弟选择器
点击查看代码
Title
div1
p1
span1
p2
span3
p3
div2
span2
属性选择器
方式一:直接通过属性名查找
点击查看代码
属性选择器
用户名
密码
出生日期
邮箱
方式二:属性名是type并且值是text的标签
点击查看代码
属性选择器
用户名
密码
出生日期
邮箱
方式三:属性名是type并且值是text的div标签
点击查看代码
属性选择器
用户名
密码
出生日期
邮箱
分组与嵌套
分组
点击查看代码
Title
属性选择器
用户名
密码
出生日期
邮箱
span
嵌套
使用:#d1, .c1, span { 查找id是d1或者class包含c1或者span
color: red;
}
点击查看代码
Title
属性选择器
用户名
密码
出生日期
邮箱
span
伪类选择器
鼠标悬浮
点击查看代码
Title
获取聚点
点击查看代码
Title
伪元素选择器
通过css操作文本内容
使用场景
- 用于清除浮动带来的负面影响
- 用于网站的内容防爬
修改首个字体样式
p:first-letter {
color: blue;
font-size: 72px;
}
点击查看代码
今天又老了三百六十五分之一岁
在文本开头添加内容
p:before {
content: '开始';
color: blue;
}
点击查看代码
今天自己做了什么有意义的事
在文本结尾添加内容
p:after {
content: '结尾';
color: green;
}
点击查看代码
今天有没有对明天的规划
选择器优先级
相同选择器
就近原则:离标签越近的选择器优先级越高
点击查看代码
相同选择器距离近的优先级高
不同选择器
行内选择器 > id选择器 > 类选择器 > 标签选择器
点击查看代码
不同选择器共存时，标签选择器优先级最低
不同选择器共存时，类选择器优先级第三高
不同选择器共存时，id选择器优先级第二高
不同选择器共存时，行内选择器优先级高
css修改字体属性
文字字体
使用方法：font-family: 华文行楷
文字字体实际使用
这是一个行楷字体
字体大小
使用方法：font-size: 24px
字体大小实际使用
这是方正兰亭超细黑简体
字体粗细
使用方法：font-weight: lighter\bolder
字体粗细实际使用
这是超级加粗字体
这是变浅字体
字体颜色
以绿色举例
方式1
颜色单词：color: green;
点击查看代码
这是草原色
方式2
三基色：color: rgb(0, 128, 0);
点击查看代码
这是草原色
方式3
颜色编号：color: #4f4f4f;
点击查看代码
还是草原色
查看图片
css修改文字属性
文字对齐
text-align:center/left/right
分别对应居中，左对齐，右对齐
点击查看代码
Title
居中
左对齐
右对齐
查看图片
文字装饰
a标签默认带下划线,并且有颜色。没有点击过是蓝色,点击过是紫色。
text-decoration: none; 去除a标签的下划线
text-decoration: line-through; 删除线
text-decoration: overline; 上边线
text-decoration: underline; 下划线
查看图片
首行缩进
text-indent: 24px;即是首行缩进24px
点击查看代码
Title
首行缩进
首行缩进
首行缩进
首行缩进
查看图片
css修改背景属性
背景颜色
background-color: red;
点击查看代码
Title
背景颜色1
背景颜色2
背景颜色3
查看图片
背景图片
background-image:url("图片");
提示：背景图片如果没有设置的区域大,那么默认自动填充满
background-repeat:no-repeat\repeat-x\repeat-y 是否平铺
点击查看代码
Title
查看图片
background-position:left top; 图片位置
点击查看代码
Title
background-attachment: fixed; 背景附着
点击查看代码
Title
查看图片
css修改边框属性
自定义调整每个边的边框
border-left/top/right/bottom-color: black;
border-left/top/right/bottom-width: 10px;
border-left/top/right/bottom-style: solid;
点击查看代码
Title
查看图片
统一调整每个边的边框
border: 5px solid black;顺序没有要求
dotted 点状虚线边框
dashed 矩形虚线边框
solid 实线边框
点击查看代码
Title
查看图片
画圆
border-radius: 50%
提示：长宽一样就是圆，不一样就是椭圆
点击查看代码
Title
查看图片
css修改dispaly属性
display:inline 让标签具备行内标签的特性(不能设置长宽)
display:block 让标签具备块儿级标签的特性(可以设置长宽)
display:inline-block 使元素同时具有行内元素和块级元素的特点
display:none 隐藏标签，页面上不会保留位置也不显示
visibility:hidde 也是隐藏标签，注意：位置会保留
查看图片
盒子模型
盒子模型可以将标签看成是一个个小箱子
"""
小箱子组成部分 盒子模型
内部物品 content(内容)
内部物品与箱子内部的距离 padding(内边距、内填充)
箱子的厚度 border（边框）
箱子与箱子之间的距离 margin(外边距)
提示：两个标签之间的距离，有些情况既可用margin也可以用padding
"""
body标签默认自带8px的margin值
编写页面前一般会去掉
margin-left: 0;
margin-top: 0;
margin-right: 0;
margin-bottom: 0;
点击查看代码
Title
查看图片
margin: 1px 2px 3px 4px 上 右 下 左(顺时针方向)
点击查看代码
Title
查看图片
margin: 1px 2px 3px 上 左右 下
点击查看代码
Title
查看图片
margin: 1px 2px 上下 左右
点击查看代码
Title
查看图片
margin: 1px 统一设置一个值
点击查看代码
Title
查看图片
padding用法
点击查看代码
Title
查看图片
浮动
浮动的作用
float: left/right;
浮动是所有网站页面布局必备的，可以将块儿级标签浮动起来脱离正常的文档流
是多个块儿级标签可以在一行显示，全部飘在空中
点击查看代码
Title
浮动
浮动
浮动
浮动
查看图片
浮动的影响
浮动会造成父标签塌陷
解决浮动的影响
推导流程
- 直接写div然后写对应的长宽
- 写div然后添加clear属性，避免去查找长宽
- 万能公式
.clearfix:after {
content: '';
clear: both;
display: block;
}
点击查看代码
Title
浮动
浮动
查看图片
溢出属性
文本内容超出了标签的最大范围
overflow: hidden; 隐藏文本内容
overflow: auto\scroll; 可滚动条查看
点击查看代码
Title
北京上海广州深圳
点击查看代码
Title
北京上海广州深圳
点击查看效果图片
溢出实际案例
点击查看代码
Title
点击查看效果图片
定位属性
定位的状态
- 静态定位 static
所有的标签默认都是静态定位，即不能通过定位操作改变位置 - 相对定位 relative
相对于标签原来的位置做定位 - 绝对定位 absolute
相对于已经定位过的父标签做定位 - 固定定位 fixed
相对于浏览器窗口做定位
点击查看相对定位代码
Title
定位
点击查看效果图片
点击绝对定位查看代码
Title
定位
点击查看效果图片
点击查看固定定位代码
Title
固定
点击查看效果图片
定位操作
position：left\right\top\bottom
点击查看代码
Title
点击登陆
点击查看效果图片
z-index属性
动态弹出的分层界面称之为模态框
点击查看代码
Title
点击查看效果图片
自定义博客页面
点击查看代码
Title
点击查看css代码
/*公共样式*/
body {
margin: 0;
background-color: antiquewhite;
}
a {
text-decoration: none;
}
ul {
list-style-type: none;
}
/*左侧样式*/
.blog_left {
background-color: gray;
float: left;
height: 100%;
width: 20%;
position: fixed;
left: 0;
top: 0;
}
.blog_avatar {
height: 180px;
width: 180px;
border-radius: 50%;
margin: 20px auto;
border: dodgerblue 2px solid;
overflow: hidden;
}
.blog_avatar img {
width: 100%;
}
.blog_title {
text-align: center;
font-size: 24px;
}
.blog_desc {
text-align: center;
font-size: 24px;
}
.blog_link {
padding-left: 64px;
padding-top: 48px;
}
.blog_label {
padding-top: 48px;
padding-left: 64px;
}
/*右侧样式*/
.blog_right {
float: right;
height: 100%;
width: 80%;
}
.blog_article {
background-color: white;
margin: 20px 50px 20px 10px ;
box-shadow: 5px 5px 5px rgba(0,0,0,0.5);
}
.article_title .title {
float: left;
font-size: 36px;
}
.article_title .data {
float: right;
font-size: 24px;
font-weight: lighter;
padding-top: 12px;
padding-right: 12px;
}
.article_content {
padding-top: 64px;
padding-bottom: 24px;
font-weight: lighter;
font-size: 24px;
text-indent: 18px;
border-bottom: 1px solid black;
}
.article_label {
font-size: 18px;
padding-top: 12px;
padding-left: 12px;
padding-bottom: 12px;
}
