03 CSS介绍
03.CSS介绍
层叠样式表：就是给HTML标签添加养的，让他变的更加的好看
注释：
/*单行注释*/
/*
多行注释1
多行注释2
多行注释3
*/
通常我们在写CSS样式的时候也会用注释来划定样式区域（因为HTML代码多所以对应的CSS代码也会很多）
/* 这是博客园首页的CSS样式文件*/
/*顶部导航条样式*/
/*左侧菜单栏样式*/
/*右侧菜单栏样式*/
# CSS的语法结构
选择器{属性1:值1;
属性2:值2;
属性2:值2;
}
# css的三种引入方式
1.style标签内部直接书写
<style>
h1{
color: aqua;
}
</style>
2.link标签引入外部css文件
<link rel="stylesheet" href="mycss.css">
3.行内式(一般不用)
<h1 style="color: aquamarine">
你好啊
</h1>
'''
css的学习流程
1.先学如何查找标签
css查找标签的凡事你一定要学会
因为后面所有的框架封装的查找语句都是基于css来的
2.之后在学如何添加样式
'''
1.css选择器
1.1. 基本选择器
元素选择器
p{color:"red";}
id选择器
#id1{
}
类选择器
.c1{
font-size:14px;
}
p.c1{
color:red;
}
注意：
样式类名不要用数字开头（有的浏览器不认）。
标签中的class属性如果有多个，要用空格分隔。
通用选择器
*{
color:white;
}
1.2. 组合选择器
在前端我们将标签的嵌套用亲戚关系来表述层级
<div>
<p>div里面的p</p>
<p>div p
<span>div p span</span>
</p>
<span>div里面的span</span>
</div>
在此例子中：
div里面的p，span都是div的后代
p是div的儿子，span是p的儿子，span是div的孙子
div是p的父亲，p是span的父亲
后代选择器
/* 后代选择器*/
div span{
color: red;
}
儿子选择器
/*儿子选择器*/
div>span{color: green}
毗邻选择器
/*毗邻选择器*/
div+p{
/*同级别紧挨着的下面的第一个标签*/
color: aqua;
}
弟弟选择器
/*弟弟选择器*/
div~span{
/*同级别下面所有的span*/
color: chartreuse;
}
1.3. 属性选择器
属性选择器是以[]作为标志的
含有某个属性
[username]{
/*所有含有属性名是username的标签背景改为红色 */
background-color:red ;
}
含有某个属性并且有某个值
[username='wss']{
/*找到所有属性名是username并且属性值为wss的标签 */
background-color: green;
}
含有某个属性并且有某个值的某个标签
input[username='wss']{
/*找到所有属性名是username并且属性值是wss的input标签*/
background-color: antiquewhite;
}
2. 分组与嵌套
3. 伪类选择器
a:link{
/*访问之前的状态*/
color: red;
}
a:hover{
/*鼠标悬停的状态*/
color: aqua;
}
a:active{
/*鼠标点击不松开时的状态*/
color: black;
}
a:visited{
/*访问之后的状态*/
color: antiquewhite;
}
input:focus{
/*input框获取焦点(鼠标点了input框)*/
background-color: red;
}
4. 伪元素选择器
p:first-letter{
/*第一个字体改变格式*/
font-size: 48px;
color: aqua;
}
p:before{
/*在文本开头 同css添加内容，用户无法选中*/
content: '你说的对';
color: blue;
}
p:after{
/*在文本结尾 同css添加内容，用户无法选中*/
content: '你说的对';
color: blue;
}
before和after通常都是用来清除浮动带来的影响：父标签塌陷的问题
5. 选择器优先级
'''
id选择器
类选择器
标签选择器
行内式
'''
选择器相同 书写顺序不同 就近原则：谁离标签近，听谁的
选择器不同 行内（内联） > id选择器 > 类选择器 >标签选择器 精确度越高优先级越高
6. CSS相关属性
6.1. 长宽设置
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
p{
background-color: aqua;
width: 300px;
height: 100px;
}
span{
/*行内标签无法设置长宽 就算写了，也不会生效*/
background-color: green;
width: 100px;
height: 50px;
}
</style>
</head>
<body>
<p>p</p>
<span>span</span>
</body>
6.2. 字体属性
font-family：设置字体
font-size：设置字体大小
font-weight：字体粗细，宽度
color：设置颜色
text-decoration：设置字体装饰
text-indent：可以设置缩进
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
p{
font-family: '华文宋体','微软雅黑'; /*第一个不生效，就用后面的字体*/
font-size: 20px;
text-indent: 32px; /*缩进32px*/
font-weight: bolder; /*bolder lighter 100~900 inherit 继承父元素的粗细值*/
/*color: red; !*直接写颜色英语*!*/
/*color: #eeeeee; !*颜色编号*!*/
/*color: rgb(128,2,45); !*三基色 数字 范围 0-255*!*/
/*color: rgba(128,2,45,02); !*第四个参数是颜色的透明度 范围是0-1*!*/
/*text-decoration: underline; !*下划线*!*/
text-decoration: overline; /*上划线*/
}
a {
text-decoration: none; /*无样式,主要给a标签去掉自带下划线*/
}
</style>
</head>
<body>
<p>曹操了草草，草草了曹</p>
<a href="https://www.mzitu.com">点我</a>
</body>
</html>
6.3. 文字属性
text-align:
center:设置居中
left：左对齐
right：右对齐
justify：两端对齐
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
p {
/*text-align: center; !*居中显示*!*/
/*text-align: left; !*左对齐*!*/
text-align: right; /*右对齐*/
text-align: justify; /*两端对齐*/
}
</style>
</head>
<body>
<p>你在叫什么啊。</p>
<p>讲实话我不比你看的多。</p>
<p>讲实话上海我不比你呆的时间长。</p>
</body>
</html>
6.4. 边框
边框属性
border-width 边框宽度
border-style 边框样式
border-color 边框颜色
#d1 {
border-width: 2px;
border-style: solid;
border-color: red;
}
通常使用简写方式
#d1 {
border: 2px solid red;
}
边框样式
| 值 | 描述 |
|---|---|
| none | 无边框。 |
| dotted | 点状虚线边框。 |
| dashed | 矩形虚线边框。 |
| solid | 实线边框。 |
除了可以统一设置边框外还可以单独为某一个边框设置样式，如下所示：
#d1 {
border-top-style:dotted;
border-top-color: red;
border-right-style:solid;
border-bottom-style:dotted;
border-left-style:none;
}
border-radius
用这个属性能实现圆角边框的效果。
将border-radius设置为长或高的一半即可得到一个圆形。
具体实例，如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
p {
background-color: red;
border-color: red;
}
#d1 {
background-color: green;
height: 400px;
width: 400px;
border-radius: 50%; /*直接写50%即可 长宽一样就是圆，不一样就是椭圆*/
}
</style>
</head>
<body>
<p>你真帅啊，雀食蟀啊，雀食蟀，你搞的真不赖</p>
<div id="d1"></div>
</body>
</html>
6.5. display属性
用于控制HTML元素的显示效果
| 值 | 意义 |
|---|---|
| display: none | 隐藏标签不展示到前端页面并且原来的位置也不占有了 但是元素还存在于文档上 |
| display: inline | 将标签设置为行内标签的特点 |
| display: block | 将标签设置成块级标签的特点 |
| display: inline-block | 标签既可以在一行显示又可以设置长宽 |
display:"none"与visibility:hidden的区别：
visibility：hidden：可以隐藏某个元素，但隐藏的元素仍需要占用与未隐藏之前一样的空间，也就是说，该元素虽然被隐藏了，但仍然会影响布局
display:none:可以隐藏某个元素，且隐藏的元素不会占用任何空间，也就是说，该元素不但被隐藏了，而且该元素原本占用的空间也会从页面布局中消失
6.6. CSS盒子模型
margin：用于控制元素与元素之间的距离；margin的最基本用途就是控制元素周围空间的间隔，从视觉角度上达到相互隔开的目的
padding：用于控制内容与边框之间的距离
border：围绕内边距和内容外的边框
content：盒子中的内容，显示文本和图像
margin外边距 1、 margin是设置盒子与盒子之间的位置关系 2、边框线以外的距离都可以设置margin 3、使用margin
单一方向margin
margin-left
margin-right
margin-top
margin-bottom
多个方向margin
1个值 4个方向
2个值 上下 左右
3个值 上 左右 下
4个值 上 右 下 左
margin-left:
正值 右移动
负值 左移动
margin-top
正值 下移动
负值 上移动
4、让块元素水平居中（内联元素不起作用）
margin：0 auto
margin-top:5px;
margin-right:10px;
margin-bottom:15px;
margin-left:20px;
推荐使用简写：
margin: 5px 10px 15px 20px;
常见居中：
#d1 {
margin: 0 auto;
}
padding内边距填充1、控制盒子与内容之间的位置关系 2、边框线以内的距离都可以设置padding 3、内边框会撑大盒子，如果设置padding，让盒子不变形，加上多少padding，盒子的宽高就需要减去多少padding 4、padding的设置 单一方向padding padding-left padding-right padding-top padding-bottom
多个方向padding 1个值 4个方向 2个值 上下 左右 3个值 上 左右 下 4个值 上 右 下 左
5、padding不能设置负值
#d1 {
padding-top: 5px;
padding-right: 10px;
padding-bottom: 15px;
padding-left: 20px;
}
推荐使用简写：
#d1 {
padding: 5px 10px 15px 20px;
}
6.7. float浮动
在CSS中，任何元素都可以浮动
浮动元素会生成一个块级框，而不论它本身是何种元素
关于浮动的两个特点：
浮动的框可以向左或向右移动，知道它的外边缘碰到包含框或另一个浮动框的边框为止。
由于浮动框不在文档的普通流中，所以文档的普通流中的块框表现得就像浮动框不存在一样。
三种取值
left：向左浮动
right：向右浮动
none：默认值，不浮动
浮动带来的影响
浮动带来的影响：父标签塌陷
通用的解决浮动带来的影响方法
在写html页面之前 先提前写好处理浮动带来的影响的 css代码
.clearfix:after {
content:' ';
display:block;
clear:both;
}
只要标签出现了塌陷的问题就给该塌陷的标签加一个clearfix属性即可
6.8. clear
clear属性规定元素的哪一侧不允许其他浮动元素。
| 值 | 描述 |
|---|---|
| left | 在左侧不允许浮动元素。 |
| right | 在右侧不允许浮动元素。 |
| both | 在左右两侧均不允许浮动元素。 |
| none | 默认值。允许浮动元素出现在两侧。 |
| inherit | 规定应该从父元素继承 clear 属性的值。 |
注意：clear属性只会对自身起作用，而不会影响其他元素。
6.9. 清除浮动
清除浮动的副作用（父标签塌陷问题）
主要有三种方式：
固定高度
伪元素清除法
overflow:hidden
伪元素清除法（使用较多）：
.clearfix:after {
content: "";
display: block;
clear: both;
}
6.10. overflow溢出属性
| 值 | 描述 |
|---|---|
| visible | 默认值。内容不会被修剪，会呈现在元素框之外。 |
| hidden | 内容会被修剪，并且其余内容是不可见的。 |
| scroll | 内容会被修剪，但是浏览器会显示滚动条以便查看其余的内容。 |
| auto | 如果内容被修剪，则浏览器会显示滚动条以便查看其余的内容。 |
| inherit | 规定应该从父元素继承 overflow 属性的值。 |
overflow（水平和垂直均设置）
overflow-x（设置水平方向）
overflow-y（设置垂直方向）
圆形头像
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>圆形头像</title>
<style>
body{
margin: 0;
background-color: #4e4e4e;
}
#d1 {
height: 400px;
width: 400px;
border-radius:50% ;
border: 5px solid white;
margin: 0 auto;
overflow: hidden;
}
#d1>img {
width: 100%;
}
</style>
</head>
<body>
<div id="d1">
<img src="22.png" alt="">
</div>
</body>
</html>
6.11. 定位
静态
所有的标签默认都是静态的static，无法改变位置
相对定位
相对于标签原来的位置做移动relative
绝对定位
相对于已经定位过的父标签做移动（如果没有父标签那么就以body为参照）
当你不知道页面其他标签的位置和参数，只给你一个父标签的参数吗，让你基于该标签，左定位
固定定位
相对于浏览器窗口固定在某个位置
6.11. 验证浮动和定位是否脱离文档流（原来的位置是否还保留）
'''
浮动
相对定位
绝对定位
固定定位
'''
# 不脱离文档流
浮动
# 脱离文档流
相对定位
绝对定位
固定定位
6.12. 模态框
z-index
#i2 {
z-index: 999;
}
设置对象的层叠顺序。
z-index 值表示谁压着谁，数值大的压盖住数值小的，
只有定位了的元素，才能有z-index,也就是说，不管相对定位，绝对定位，固定定位，都可以使用z-index，而浮动元素不能使用z-index
z-index值没有单位，就是一个正整数，默认的z-index值为0如果大家都没有z-index值，或者z-index值一样，那么谁写在HTML后面，谁在上面压着别人，定位了元素，永远压住没有定位的元素。
从父现象：父亲怂了，儿子再牛逼也没用
eg:百度登录页面 其实是三层结构
1.最底部是正常内容（z=0）离用户最远
2.黑色的透明层（z=90）
3.白色的注册区域（z=100）
模态框示例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
body{
margin: 0;
}
.cover{
position: fixed;
left: 0;
right: 0;
top:0;
bottom: 0;
z-index: 90;
background-color: rgba(0,0,0,0.5);
}
.modal{
background-color: white;
height: 200px;
width: 400px ;
position: fixed;
left: 50%;
top: 50%;
margin-left:-200px ;
margin-top:-100px ;
z-index: 100;
}
</style>
</head>
<body>
<div>这是最底层的页面内容</div>
<div class="cover"></div>
<div class="modal">
<h1>登陆</h1>
<p>usernmae<input type="text"></p>
<p>password<input type="text"></p>
</div>
</body>
</html>
6.13. opacity
用来定义透明效果。取值范围是0~1，0是完全透明，1是完全不透明。
03 CSS介绍的更多相关文章
- 前端 CSS 介绍
CSS介绍 我们为什么需要CSS? 使用css的目的就是让网页具有美观一致的页面,另外一个最重要的原因是内容与格式分离 在没有CSS之前,我们想要修改HTML标签的样式需要为每个HTML标签单独定义样 ...
- 一、CSS介绍
CSS介绍 1.css概述: CSS指层叠样式表 CSS样式表极大地提高了工作效率 selector{ property:value } 注:property(属性)大于1之后,property之间用 ...
- 前端学习之路-CSS介绍，Html介绍，JavaScript介绍
CSS介绍 学前端必备掌握CSS样式,css为层叠样式表,用来定义页面的显示效果,加强用户的体验乐趣,那么如何用css到html中呢? style属性方式 利用标签中的style属性来改变显示样式 & ...
- 前端基础之css介绍
CSS介绍 CSS(Cascading Style Sheet,层叠样式表)定义如何显示HTML元素. 当浏览器读到一个样式表,它就会按照这个样式表来对文档进行格式化(渲染). CSS语法 CSS实例 ...
- 7-[CSS]-css介绍，引入方式
1.CSS介绍:层叠样式表(Cascading Style Sheets) 我们为什么需要CSS? 使用css的目的就是让网页具有美观一致的页面,另外一个最重要的原因是内容与格式分离 在没有CSS之前 ...
- 1.css介绍
CSS介绍 我们为什么需要CSS? 使用css的目的就是让网页具有美观一致的页面,另外一个最重要的原因是内容与格式分离 在没有CSS之前,我们想要修改HTML元素的样式需要为每个HTML元素单独定义样 ...
- Python web前端 03 CSS属性
Python web前端 03 CSS属性 一.文字.文本属性 1.文字属性 font-family #字体类型浏览器默认的字体是微软雅黑,字体中有多个字体的时候,如果前面的字体没有就使用后面的字体 ...
- CSS介绍&选择器&选择器优先级
CSS介绍 CSS(Cascading Style Sheet,层叠样式表)定义如何显示HTML元素. 当浏览器读到一个样式表,它就会按照这个样式表来对文档进行格式化(渲染). CSS语法 '''se ...
- 前端之CSS介绍
CSS介绍 CSS(Cascading Style Sheet,层叠样式表)定义如何显示HTML元素. 当浏览器读到一个样式表,它就会按照这个样式表来对文档进行格式化(渲染). CSS的语法 CSS语 ...
随机推荐
- 第10组 Beta冲刺 总结
1.基本情况 组长博客链接:https://www.cnblogs.com/cpandbb/p/14050808.html 答辩总结: ·因为alpha阶段的产品做得偏离了方向,所以beta冲刺大家非 ...
- Python实战案例系列（一）
本节目录 烟草扫码数据统计 奖学金统计 实战一.烟草扫码数据统计 1. 需求分析 根据扫码信息在数据库文件中匹配相应规格详细信息,并进行个数统计 条码库.xls 扫码.xlsx 一个条码对应多个规格名 ...
- Blinn-Phong反射模型实践(web实现)
Blinn-Phong反射模型实践(web实现) games101 第四次作业 最终完成带贴图的 Blinn-Phong 模型,产生光照效果 完成了 不带贴图的 Blinn-Phone 反射模型 带贴 ...
- 曼孚科技：“四管齐下”筑牢AI数据隐私安全防线
谈及数据,绕不开的一个话题就是数据隐私与数据安全.随着数字化进程加快,数据安全事件频发,据Risk Based Security统计,去年国际数据泄露事件近5000起,被泄露数据近41亿条,数据造成的 ...
- Docker 与 K8S学习笔记（十 二）容器间数据共享
数据共享是volume的关键特性,今天我们来看一下通过volume实现容器与host.容器与容器之间共享数据. 一.容器与host共享数据 在上一篇中介绍到的bind mount和docker man ...
- tmux安装配置与使用
tmux安装 sudo apt-get install tmux tmux配置 在家目录下操作 cd git clone https://github.com/gpakosz/.tmux.git ln ...
- 创建app子应用，配置数据库，编写模型，进行数据迁移
文章目录 web开发django模型 1.创建app子应用 2.配置子应用 3.使用 4.配置子应用管理自已的路由 django数据库开发思维与ORM 1.创建数据库 2.配置数据库 3.安装pymy ...
- 记一次oom问题排查
大家好,我是大彬~ 今天给大家分享最近出现的OOM问题. 上周五早上,测试同学反馈测试环境的子系统服务一直超时,请求没有响应. 收到这个问题之后,我有点纳闷,最近这个系统也没有改动代码逻辑,怎么会突然 ...
- 很详细的FFT（快速傅里叶变换）概念与实现
FFT 首先要说明一个误区,很多人认为FFT只是用来处理多项式乘的,其实FFT是用来实现多项式的系数表示法和点值表示法的快速转换的,所以FFT的用处远不止多项式乘. FFT的前置知识:点值表示法,复数 ...
- centos7无法访问虚拟机web服务
第一种: 先看下防火墙状态:firewall-cmd --state 关闭防火墙再试试:systemctl stop firewalld.service 第二种,不想关闭防火墙 放开http服务 fi ...