02 前端基础之CSS
前端基础之CSS
css简介
# 层叠样式表>>>:就是给HTML标签修改样式
语法结构
选择器 {
属性名1:属性值1;
属性名2:属性值2
}
注释语法
/*注释内容*/
引入方式
1.style内部直接编写css代码
平时学习、练习的时候推荐使用
2.link标签引入外部css文件
正式工作、实际生产环境推荐使用
3.标签内直接书写
一般情况下不推荐使用 容易造成荣誉现象
"""
单独开设的css文件内代码也是非常多的 可以借助于注释管理
/*导航条样式*/
/*侧边栏样式*/
"""
基本选择器(重要)
"""
css是用来调节标签样式的 那为什么需要学选择器呢?
因为同一个页面上有很多相似的标签 并且这些标签在不同的位置有不同的样式 所以为了能够区分 我们肯定先需要学习如何查找指定的标签
"""
1.标签选择器>>>:通过标签名直接查找
/*查找所有的div标签*/
div {
color: red;
}
2.类选择器(关键符号为句点符.)>>>:通过class值查找标签
/*查找所有含有c1样式类的标签*/
.c1 {
color: red;
}
3.id选择器(关键符号为警号#)>>>:通过id值查找标签
/*查找id为d1的标签*/
#d1 {
color: orange;
}
4.通用选择器(了解)
/*body内所有的标签*/
* {
color: darkgray;
}
组合选择器(重点)
"""
为了区分嵌套标签之间的关系 我们发明了一种称呼
<div>
<p>
<span></span>
</p>
</div>
span是p的儿子 是div的孙子也可以说是div的后代
p是div的儿子也是div后代 是span的父亲
div是p的父亲是span的爷爷 也可以说是他们的祖先
"""
1.后代选择器(特征为空格)
/*查找div内部所有的后代span*/
div span {
color: red;
}
2.儿子选择器(特征>)
/*查找div内部所有的儿子span*/
div > span {
color: greenyellow;
}
3.毗邻选择器(特征为+)
/*查找同级别下面紧挨着的第一个span(不能有其他标签间隔)*/
div + span {
color: pink;
}
4.弟弟选择器(特征为~)
/*查找同级别下面所有的span(不需要紧挨着)*/
div ~ span {
color: deeppink;
}
属性选择器
# 标签可以有默认的属性也可以自定义属性
<p id="d1" class="c1" name="jason" pwd="123">123</p>
[name] { /*查找含有name属性名的标签*/
color: red;
}
[name='jason'] { /*查找含有name属性名并且值为jason的*/
color: red;
}
p[name='jason'] { /*查找含有name属性名并且值为jason的p*/
color: red;
}
分组与嵌套
# 多个相同选择器并列使用
div,span,p { /*查找div或者span或者p*/
color: red;
}
# 多个不同选择器并列使用
div,#d1,.c1 { /*标签查找div id查找d1 类查找c1*/
color: red;
}
# 不并列同样可以使用组合选择器
.c1 p { /*查找class为c1的后代p标签*/
color: red;
}
# 直接筛选
div#d1 { /*查找id为d1的div标签*/
color: red;
}
div.c1 { /查找class为c1的div标签/
color: red;
}
"""
练习题
#d1>div>.c1>span.c2
查找id为d1的标签内部的儿子div
并且在儿子div内部查找class为c1的儿子标签
并且在该儿子内部查找class为c2的儿子span
"""
伪类选择器
/*鼠标悬浮在上面*/
a:hover { # 重点掌握 很多网址都在用!!!
color: orange;
}
"""a标签默认的颜色会变化 第一次是蓝色 后面是紫色"""
input:focus {
background-color: red;
}
"""我们将input框被用户点击即将录入数据的过程看成是focus状态(聚焦状态)"""
伪元素选择器
# 首字调整>>>:也是一种文档布局的方式
p:first-letter {
font-size: 48px; /*字体大小*/
color: red;
}
# 在文本的前面通过css动态渲染文本>>>:特殊文本无法选中
p:before {
content: '嘿嘿';
color: red;
}
<p>::before言而有信 品行端正 光明磊落 待人以诚</p>
# 在文本的后面通过css动态渲染文本>>>:特殊文本无法选中
p:after {
content: '呵呵';
color: greenyellow;
}
<p>言而有信 品行端正 光明磊落 待人以诚::after</p>
"""
以后我们在编写爬虫程序爬取页面内容的时候如果没有正常文本
那么可能是因为伪元素选择器的问题
"""
选择器的优先级
"""
我们学习了三种css引入方式并且学习了很多选择器
那么如果出现多个选择器修改同一个标签样式 会优先参考谁的
研究基本选择器即可
标签选择器 类选择器 id选择器 行内选择器
"""
# 相同选择器不同导入方式
选择器系统遵循就进原则 从上往下谁离标签更近谁说了算
# 不同选择器不遵循就近原则>>>:优先级
行内选择器 > id选择器 > 类选择器 > 标签选择器
字体相关
1.宽和高
只有块儿级标签可以设置 行内标签无法设置
p {
height: 1000px;
width: 50px;
}
2.字体大小
font-size: 99px; # 字体大小一般有固定的大小参考(肉眼适应)
3.粗细
font-weight: bolder;
font-weight: lighter;
4.文本颜色
color:red; # 第一种
color:#4e4e4e; # 第二种
color:rgb(88,88,88) # 第三种
rgba(88,88,88,0.2) # 最后一个参数调整透明度(0-1)
5.文字对齐
text-align: center; # 居中展示
6.文字装饰(很常用!!!)
text-decoration: none; # 主要用于去除a标签默认的下划线
7.首行缩进
text-indent: 32px; # 默认文字大小是16px
背景属性
background-color: orange; # 背景颜色
background-image: url('url'); # 背景图片
background-repeat: no-repeat; # 是否铺满
background-position:左右 上下; # 图片位置
"""多个属性名前缀相同 那么可以简写"""
background:orange url('url'); # 一个个编写即可 不写就默认
# 如何实时修改图片位置
浏览器找到标签的css代码 然后方向键上下按住即可动态调整
边框属性
p {
/*border-left-color: red;*/
/*border-left-style: solid;*/
/*border-left-width: 3px;*/
/*多个属性有相同的前缀 一般都可以简写*/
/*border-left: 5px red solid; !*没有顺序*!*/
/*border-top:orange 10px dotted;*/
/*border-right: black dashed 5px;*/
/*border-bottom: deeppink 8px solid;*/
/*多个属性有相同的前缀 一般都可以简写*/
border: 5px red solid; /*上下左右一致*/
}
div {
height: 500px;
width: 500px;
border: 5px solid red;
/*画圆*/
border-radius: 50%;
}
display属性
div {
display: inline; /*行内*/
}
span {
/*display: block; !*块级*!*/
display: none;
/*
隐藏标签 页面上看不见也不再占用页面位置
但是通过浏览器查找标签是可以看到的
到后面学习django会讲跨站请求伪造(钓鱼网站)
*/
}
p {
display: inline-block;
/*
具备块级标签可以修改长宽的特性
也具备行内标标签文本多大就占多大的特性
*/
}
盒子模型
"""
以快递盒为例
1.快递盒与快递盒之间的距离 外边距(标签之间的距离)
2.快递盒的厚度 边框
3.内部物品到盒子的距离 内边距(文本内容到边框的距离)
4.物品本身的大小 文本大小
"""
# body标签默认自带8px的外边距 在编写的时候应该提前去掉
body {
margin: 0;
}
1.外边距(标签之间的距离)
margin简写
margin:0px; # 上下左右都一致
margin:10px 10px; # 第一个控制上下 第二个控制左右
margin:20px 10px 20px; # 上 左右 下
margin:10px 2px 3px 5px; # 上 右 下 左
2.内边距(文本内容到边框的距离)
padding简写
padding:0px; # 上下左右都一致
padding:10px 10px; # 第一个控制上下 第二个控制左右
padding:20px 10px 20px; # 上 左右 下
padding:10px 2px 3px 5px; # 上 右 下 左
浮动
# ps:html代码时没有缩进一说的 全部写在一行也可以
"""浮动主要就是用于页面布局的!!!"""
# 浮动带来的负面影响
"""会造成父标签塌陷!!!"""
解决浮动的负面影响
1.再写一个div撑场面(不可取)
2.关键字clear(可以使用)
3.通用解决策略(推荐使用):只要父标签塌陷就使用
.clearfix:after {
content: '';
clear: both;
display: block;
}
# 谁塌陷就给谁加class属性
# 浏览器默认都是文本优先展示
定位
1.静态定位 static
所有的标签默认都是静态定位即不能改变位置
2.相对定位 relative
相对标签原来的位置做定位
3.绝对定位 absolute
相对已经定位过的父标签做定位(没有则参考body标签)
eg:小米官网导航条内购物车
4.固定定位 fixed
相对浏览器窗口做定位
eg:小米官网右边回到顶部
如何使用css完成定位
定位关键字position
位置关键字left、right、top、bottom
是否脱离文档流
# 标签位置改变之后 原来的位置是否会空出来
如果空出来了被其他标签自动占有 那么表示脱离否则不脱离
浮动、定位
脱离文档流
浮动、绝对定位、固定定位
不脱离文档流
相对定位
溢出属性
# 圆形头像
#d1 {
width: 200px;
height: 200px;
border: 3px solid darkgray;
border-radius: 50%;
overflow: hidden;
}
#d1 img {
/*max-width: 100%;*/
width: 100%;
}
z-index属性
# 浏览器平面不是一个二维坐标系而是一个三维坐标系
eg:百度登录或者退出界面>>>:三明治结构(模态框)
透明度
rgba(124,124,124,0.5)
只影响颜色
opacity:0.5
影响颜色和字体
练习
1.自行随意发挥搭建一个用户注册页面(用上所有的知识点)
2.尝试着使用css给题目1的标签加点样式
02 前端基础之CSS的更多相关文章
- 前端基础:CSS样式选择器
前端基础:CSS样式选择器 CSS概述 CSS是Cascading Style Sheets的简称,中文意思是:层叠样式表,对html标签的渲染和布局.CSS规则由两个主要的部分组成:1.选择器:2. ...
- 前端第二篇---前端基础之CSS
前端第二篇---前端基础之CSS 目录 一.css介绍 二.css语法 三.css的几种引入方式 四.css选择器 五.css属性相关 六.盒子模型 拓展 一.css介绍 CSS(Cascading ...
- Web前端基础(4):CSS(一)
1. CSS介绍 现在的互联网前端分三层: HTML:超文本标记语言.从语义的角度描述页面结构. CSS:层叠样式表.从审美的角度负责页面样式. JS:JavaScript .从交互的角度描述页面行为 ...
- 2021年3月-第02阶段-前端基础-HTML+CSS阶段-Day02
HTML5 第二天 一.rotate 2d旋转指的是让元素在2维平面内顺时针旋转或者逆时针旋转 使用步骤: 给元素添加转换属性 transform 属性值为 rotate(角度) 如 transfor ...
- 2021年1月-第02阶段-前端基础-HTML+CSS进阶-VS Code 软件
软件安装 VSCode软件 能够安装 VS Code 能够熟练使用 VS Code 软件 能够安装 VS Code 最常用的插件 1. VS Code简介 1.1 VS Code 简介 Visual ...
- 2021年3月-第02阶段-前端基础-HTML+CSS阶段-Day03
HTML5 第三天 一. 认识 3D 转换 3D 的特点 近大远小 物体和面遮挡不可见 三维坐标系 x 轴:水平向右 -- 注意:x 轴右边是正值,左边是负值 y 轴:垂直向下 -- 注意:y 轴下面 ...
- 2021年1月-第02阶段-前端基础-HTML+CSS阶段-Day01
HTML5 第一天 一.什么是 HTML5 1.HTML5 的概念与定义 定义:HTML5 定义了 HTML 标准的最新版本,是对 HTML 的第五次重大修改,号称下一代的 HTML 两个概念: 是一 ...
- 2020年12月-第01阶段-前端基础-HTML CSS 项目阶段(一)
品优购项目(一) 目标: 能会引入ico图标 能简单看懂网站优化的三大标签 能使用字体图标 ( 重点 ) 能说出我们css属性书写顺序 1. 品优购项目介绍 项目名称:品优购 项目描述:品优购是一个电 ...
- 前端基础之css样式(选择器)
一.css概述 CSS是Cascading Style Sheets的简称,中文称为层叠样式表,对html标签的渲染和布局 CSS 规则由两个主要的部分构成:选择器,以及一条或多条声明. 例如 二.c ...
随机推荐
- RPC框架下实现文件上传到linux服务器
一.前端使用element -ui 的upload组件 :data 表示额外传递的参数, :header 表示设置请求头参数,如,token等, action表示后台api接口的地址 二. conto ...
- 查询 Oralce 某 schema 所拥有的权限
--https://dba.stackexchange.com/questions/14901/oracle-list-users-with-access-to-certain-tables sele ...
- spring boot + thymeleaf +security自定义规则 的简单使用
1.前言 以前开发一直使用 springMVC模式开发 ,前端页面常使用 JSP ,现在html5淘汰了 ,要么使用html ,要么使用vue , 现在使用spring boot ,有必要总结一下 ...
- 第10组 Alpha冲刺 (6/6)
1.1基本情况 ·队名:今晚不睡觉 ·组长博客:https://www.cnblogs.com/cpandbb/p/14008187.html ·作业博客:https://edu.cnblogs.co ...
- [流畅的Python]第一章数据模型
这些来自同一家出版社的动物书 像是计算机科学界一盏盏指路明灯 余幼时 初试读 学浅 以为之晦涩难懂 像是老学究咬文嚼字 现在看起来还有些有趣 其实理工男大多都很有趣 这一章介绍了 怎么样去视线一个带有 ...
- fluem读取文件并写入到hadoop的hdfs
接上一章,本章介绍使用 crontab 像指定文件定时写入,使用fluem 读取并写入到hadoop的hdfs 前提准备已安装好fluem ,和hadoop(推荐单机即可毕竟做实验) 一.进入终端执行 ...
- 《剑指offer》面试题18. 删除链表的节点
问题描述 给定单向链表的头指针和一个要删除的节点的值,定义一个函数删除该节点. 返回删除后的链表的头节点. 注意:此题对比原题有改动 示例 1: 输入: head = [4,5,1,9], val = ...
- Git:解决报错:fatal: The remote end hung up unexpectedly
使用全局代理即可.字面意思连接时间过长,被github中断了连接.
- 如何通俗地理解docker
Docker 是一个开源的应用容器引擎,让开发者可以打包他们的应用以及依赖包到一个可移植的容器中,然后发布到任何流行的 Linux 机器上,也可以实现虚拟化.容器是完全使用沙箱机制,相互之间不会有任何 ...
- Python3 生成激活码
1.文档: string模块:https://docs.python.org/3/library/string.html random模块:https://docs.python.org/3/libr ...