二、CSS知识总结(上篇)
@Author:Runsen
文章目录
- 什么是css
- css的格式
- css 三种写法
- 选择器
- 标签选择器
- id选择器
- 类选择器
- 后代选择器
- 子元素选择器
- 交集选择器
- 兄弟选择器
- 序选择器
- 同级别的第几个
- 同类型的第几个
- 属性选择器
- 通配符选择器
- 文字样式
- 规定文字样式的属性
- 规定文字粗细的属性
- 规定文字大小的属性
- 规定文字字体的属性
- 文本样式
- 文本装饰的属性
- 文本水平对齐的属性
- 文本缩进的属性
- 颜色属性
- 在CSS中如何通过color属性来修改文字颜色
- css中三大特性
- 继承性
- 层叠性
- 优先级
- 补充内容
- 优先级之important
- 优先级的权重
- 标签理解
- 什么是div?
- 什么是span?
- div和span有什么区别?
- 容器级的标签和文本级的标签的区别?
- 背景
- 背景颜色
- 背景图片
- 背景平铺
- 背景定位
- 背景属性缩写
- 背景图片和插入图片区别
什么是css
层叠样式表(英文全称:Cascading StyleSheets)是一种用来表现HTML(标准通用标记语言的一个应用)或XML(标准通用标记语言的一个子集)等文件样式的计算机语言。CSS不仅可以静态地修饰网页,还可以配合各种脚本语言动态地对网页各元素进行格式化。
css的格式
<style type="text/css">标签名称{属性名称: 属性对应的值;...}
</style>
注意点:
- style标签必须写在head标签的开始标签和结束标签之间(也就是必须和title标签是兄弟关系)
- style标签中的type属性其实可以不用写, 默认就是type=“text/css”
- 设置样式时必须按照固定的格式来设置. key: value;其中:不能省略,分号大多数情况下也不能省略
css 三种写法
- head头部写入
- 直接在标签写
style
- 新建css文件在通过link标签导入
选择器
标签选择器
标签名称{属性:值;
}
id选择器
#id名称{属性:值;
}
类选择器
.类名{属性:值;
}
id相当于人的身份证不可以重复 class相当于人的名称可以重复
后代选择器
标签名称1 标签名称2{属性:值;
}
后代选择器必须用空格隔开
后代选择器不仅仅可以使用标签名称, 还可以使用其它选择器
子元素选择器
标签名称1>标签名称2{属性:值;
}
子元素选择器只会查找儿子, 不会查找其他被嵌套的标签
子元素选择器之间需要用>符号连接, 并且不能有空格
后代选择器使用空格作为连接符号 | 子元素选择器使用>作为连接符号
后代选择器会选中指定标签中, 所有的特定后代标签, 也就是会选中儿子/孙子…, 只要是被放到指定标签中的特定标签都会被选中 | 子元素选择器只会选中指定标签中, 所有的特定的直接标签, 也就是只会选中特定的儿子标签
交集选择器
选择器1选择器2{属性: 值;
} # 用多个选择器
- 并集选择器
选择器1,选择器2{属性:值;
} #选到2个
并集选择器必须使用,来连接
兄弟选择器
相邻兄弟选择器
作用: 给指定选择器后面紧跟的那个选择器选中的标签设置属性
选择器1+选择器2{属性:值;
}通用兄弟选择器
作用: 给指定选择器后面的所有选择器选中的所有标签设置属性
选择器1~选择器2{属性:值;
}
序选择器
同级别的第几个
:first-child
选中同级别中的第一个标签
:last-child
选中同级别中的最后一个标签
:nth-child(n)
选中同级别中的第n个标签
:nth-last-child(n)
选中同级别中的倒数第n个标签
:only-child
选中父元素中唯一的标签
:nth-child(odd)
选中同级别中的所有奇数
:nth-child(even)
选中同级别中的所有偶数
同类型的第几个
:first-of-type
选中同级别中同类型的第一个标签
:last-of-type
选中同级别中同类型的最后一个标签
:nth-of-type(n)
选中同级别中同类型的第n个标签
:nth-last-of-type(n)
选中同级别中同类型的倒数第n个标签
:only-of-type
选中父元素中唯一类型的某个标签
属性选择器
input[type=password]{}
根据指定的属性名称找到对应的标签, 然后设置属性
p[class=cc]{color: blue;}
通配符选择器
*{color: red;}
文字样式
规定文字样式的属性
格式:font-style: italic;
取值:
normal
: 正常的, 默认就是正常的
italic
: 倾斜的
快捷键:
fs font-style: italic;
fsn font-style: normal;
规定文字粗细的属性
格式: font-weight: bold;
单词取值:
bold 加粗
bolder 比加粗还要粗
lighter 细线, 默认就是细线
数字取值:
100-900之间整百的数字
快捷键:
fw font-weight:;
fwb font-weight: bold;
fwbr font-weight: bolder;
规定文字大小的属性
格式:font-size: 30px;
单位:px(像素 pixel)
注意点: 通过font-size设置大小一定要带单位, 也就是一定要写px
快捷键fz font-size:;``fz30 font-size: 30px;
规定文字字体的属性
格式:font-family:"楷体";
注意点:
- 如果取值是中文, 需要用双引号或者单引号括起来
- 设置的字体必须是用户电脑里面已经安装的字体
快捷键
ff font-family:;
文本样式
文本装饰的属性
格式:text-decoration: underline;
取值:
underline 下划线
line-through 删除线
overline 上划线
none
什么都没有, 最常见的用途就是用于去掉超链接的下划线
快捷键:
td text-decoration: none;
tdu text-decoration: underline;
tdl text-decoration: line-through;
tdo text-decoration: overline;
文本水平对齐的属性
格式: text-align: right;
取值:
left 左
right 右
center 中
快捷键
ta text-align: left;
tar text-align: right;
tac text-align: center;
文本缩进的属性
格式: text-indent: 2em;
取值:
2em
, 其中em
是单位, 一个em
代表缩进一个文字的宽
快捷键
ti text-indent:;
ti2e text-indent: 2em;
颜色属性
在CSS中如何通过color属性来修改文字颜色
格式: color: 值;
取值:
英文单词
一般情况下常见的颜色都有对应的英文单词,rgb
rgb其实就是三原色, 其中r(red 红色) g(green 绿色) b(blue 蓝色)格式:
rgb(0,0,0)
这其中的每一个数字它的取值是0-255之前, 0代表不发光, 255代表发光, 值越大就越亮
红色:
rgb(255,0,0);
绿色:rgb(0,255,0);
蓝色:rgb(0,0,255);
黑色:rgb(0,0,0);
白色:rgb(255,255,255);
红色/绿色/蓝色的值都一样就是灰色
而且如果这三个值越小那么就越偏黑色, 越大就越偏白色
例如:color: rgb(200,200,200);
rgba
rgba中的rgb和前面讲解的一样, 只不过多了一个a
那么这个a呢代表透明度, 取值是0-1, 取值越小就越透明例如:
color: rgba(255,0,0,0.2);
十六进制
在前端开发中通过十六进制来表示颜色, 其实本质就是RGB
十六进制中是通过每两位表示一个颜色
例如:#FFEE00
FF表示R EE表示G 00表示B`
css中三大特性
继承性
作用: 给父元素设置一些属性, 子元素也可以使用, 这个我们就称之为继承性
注意点:
- 并不是所有的属性都可以继承, 只有以color/font-/text-/line-开头的属性才可以继承
- 在CSS的继承中不仅仅是儿子可以继承, 只要是后代都可以继承
- 继承性中的特殊性
- a标签的文字颜色和下划线是不能继承的
- h标签的文字大小是不能继承的
案例
<head>
<style>div{color: red;text-decoration: none;font-size: 30px;}
</style>
</head>
<body>
<div><p>我是段落</p>
</div>
</body>
层叠性
作用: 层叠性就是CSS处理冲突的一种能力
<head>
<style>p{color: red;}.para{color: blue;}
</style>
</head>
<body>
<p id="identity" class="para">我是段落</p> #蓝色
</body>
优先级
作用:当多个选择器选中同一个标签, 并且给同一个标签设置相同的属性时, 如何层叠就由优先级来确定
优先级判断的三种方式
- 间接选中就是指继承
如果是间接选中, 那么就是谁离目标标签比较近就听谁的
- 相同选择器(直接选中)
如果都是直接选中, 并且都是同类型的选择器, 那么就是谁写在后面就听谁的
- 不同选择器(直接选中)
如果都是直接选中, 并且不是相同类型的选择器, 那么就会按照选择器的优先级来层叠
id>类>标签>通配符>继承>浏览器默认
补充内容
优先级之important
用于提升某个直接选中标签的选择器中的某个属性的优先级的, 可以将被指定的属性的优先级提升为最高
- !important前面的感叹号不能省略
- !important必须写在属性值得分号前面
*{color: blue !important;font-size:10px;}
优先级的权重
当多个选择器混合在一起使用时, 我们可以通过计算权重来判断谁的优先级最高
- 首先先计算选择器中有多少个id, id多的选择器优先级最高
- 如果id的个数一样, 那么再看类名的个数, 类名个数多的优先级最高
- 如果类名的个数一样, 那么再看标签名称的个数, 标签名称个数多的优先级最高
标签理解
在HTML中HTML将所有的标签分为两类, 分别是容器级和文本级
什么是div?
- 作用: 一般用于配合css完成网页的基本布局
什么是span?
- 作用: 一般用于配合css修改网页中的一些局部信息
div和span有什么区别?
- div会单独的占领一行,而span不会单独占领一行
- div是一个容器级的标签, 而span是一个文本级的标签
容器级的标签和文本级的标签的区别?
- 容器级的标签中可以嵌套其它所有的标签
- 文本级的标签中只能嵌套文字/图片/超链接
容器级的标签
div h ul ol dl li dt dd ...
文本级的标签
span p buis strong em ins del ...
在CSS中CSS也将所有的标签分为两类, 分别是块级元素和行内元素
- 什么是块级元素, 什么是行内元素?
- 块级元素会独占一行
- 行内元素不会独占一行
容器级的标签
div h ul ol dl li dt dd ...
文本级的标签
span p buis stong em ins del ...
块级元素
p div h ul ol dl li dt dd
行内元素
span buis strong em ins del
- 块级元素和行内元素的区别?
块级元素
独占一行
- 如果没有设置宽度, 那么默认和父元素一样宽
- 如果设置了宽高, 那么就按照设置的来显示
行内元素
不会独占一行
- 如果没有设置宽度, 那么默认和内容一样宽
- 行内元素是不可以设置宽度和高度的
- 行内块级元素
为了能够让元素既能够不独占一行, 又可以设置宽度和高度, 那么就出现了行内块级元素
- display取值
block
块级
inline
行内
inline-block
行内块级
5.快捷键
di
display: inline
;
db
display: block
;
dib
display: inline-block
;
背景
背景颜色
在CSS中有一个background-color:属性, 就是专门用来设置标签的背景颜色的
快捷键:
bc
background-color: #fff
;
背景图片
在CSS中有一个叫做background-image: url()
;的属性,
快捷键:
bi
background-image: url()
;
背景平铺
在CSS中有一个background-repeat属性, 就是专门用于控制背景图片的平铺方式的
取值:
repeat
默认, 在水平和垂直都需要平铺no-repeat
在水平和垂直都不需要平铺repeat-x
只在水平方向平铺repeat-y
只在垂直方向平铺
快捷键
bgr
background-repeat
:
背景定位
在CSS中有一个叫做background-position:属性, 就是专门用于控制背景图片的位置
取值
水平方向: left
center
right
垂直方向: top
center ``bottom
具体的像素
例如: background-position: 100px 200px
;
记住一定要写单位, 也就是一定要写px
记住具体的像素是可以接收负数的
快捷键:
bp
background-position
: 0 0;
背景属性缩写
background: 背景颜色 背景图片 平铺方式 关联方式 定位方式;
快捷键:
bg+
background: #fff url() 0 0 no-repeat
;
<style>div{/*background-color: red;background-image: url(images/girl.jpg);background-repeat: no-repeat;background-position: left bottom;*//*background: red url(images/girl.jpg) no-repeat left bottom;*/}body{background-image: url(images/girl.jpg);background-repeat: no-repeat;/*background-attachment: scroll;*/background-attachment:fixed;}
</style>
背景图片和插入图片区别
- 背景图片仅仅是一个装饰, 不会占用位置
- 插入图片会占用位置
- 背景图片有定位属性, 所以可以很方便的控制图片的位置
- 插入图片没有定位属性, 所有控制图片的位置不太方便
二、CSS知识总结(上篇)相关推荐
- WEBBASE篇: 第五篇, CSS知识3
CSS知识3 框模型: 一,外边距(上文) 二, 内边距 1,什么是内边距? 内边距就是内容与元素边缘之间的距离: 注: 内边距会扩大元素边框内所占的区域的 语法: padding: 四个方向的 ...
- 你需掌握的CSS知识都在这了(长文建议收藏,文末有福利)
1.CSS盒模型,在不同浏览器的差异 css 标准盒子模型 css盒子模型 又称为框模型(Box Model),包含了元素内容(content).内边距(padding).边框(border).外边距 ...
- html类选择器使用在什么场景,你需掌握的CSS知识都在这了(长文建议收藏,文末有福利)...
1.CSS盒模型,在不同浏览器的差异 css 标准盒子模型 css盒子模型 又称为框模型(Box Model),包含了元素内容(content).内边距(padding).边框(border).外边距 ...
- css 商城 两列_你需掌握的CSS知识都在这了(长文建议收藏,文末有福利)
1.CSS盒模型,在不同浏览器的差异 css 标准盒子模型 css盒子模型 又称为框模型(Box Model),包含了元素内容(content).内边距(padding).边框(border).外边距 ...
- CSS 知识整理(三) 样式
CSS 知识整理(三) 样式 目录 CSS 知识整理(三) 样式 一.字体 二.文本 三.列表 四.背景 一.字体 字体:font-famliy 字号:font-size 粗细:font-weig ...
- css使两个盒子并列_你需掌握的CSS知识都在这了(长文建议收藏,文末有福利)...
(给前端大学加星标,提升前端技能.) 作者:深圳湾码农 https://juejin.im/post/5d8336d2f265da03df5f4a06 1.CSS盒模型,在不同浏览器的差异 css 标 ...
- 你该学点HTML/CSS知识的9大理由
每个人都应该学写代码--这一观点简直就是铺天盖地地映入我们眼帘.或许你会莫名其妙,程序员学代码那是理所应当,但是作为一个作家.营销人员.财务工作者甚至是工人,为什么也需要学习代码呢? 好吧,下面我会告 ...
- 知识图谱系统课程笔记(二)——知识抽取与挖掘
知识图谱系统课程笔记(二)--知识抽取与挖掘 文章目录 知识图谱系统课程笔记(二)--知识抽取与挖掘 OWL.RDF与RDFS关系 知识抽取任务定义和相关比赛 知识抽取技术 知识获取关键技术与难点 知 ...
- 人力资源管理之二十个经典故事(上篇)
人力资源管理之二十个经典故事(上篇) 一 去过庙的人都知道,一进庙门,首先是弥陀佛,笑脸迎客,而在他的北面,则是黑口黑脸的韦陀.但相传在很久以前,他们并不在同一个庙里,而是分别掌管不同的庙. 弥乐佛 ...
- 2021 年教师资格证科目二教育知识与能力 简答题
2021 年教师资格证科目二教育知识与能力 简答题 文章目录 2021 年教师资格证科目二教育知识与能力 简答题 第一章 教育基础知识 (重点) 1.教育与生产力的关系 2. 教育与政治经济的关系 3 ...
最新文章
- 数据库原理与应用(SQL Server)笔记 第十章 用户定义函数
- .NET Core + Kubernetes:Helm
- Python matplotlib绘制饼图
- 计算机网络那有红叉,未能连接一个Windows,电脑网络连接有个红叉-
- 水培设备行业调研报告 - 市场现状分析与发展前景预测
- python入门指南txt-【杂谈】爬虫基础与快速入门指南
- Paip.YXSHOP易想商场功能模块说明
- Adreno GPU上Android 游戏开发介绍 (3)
- 【附源码】计算机毕业设计java业俊宾馆客房管理系统设计与实现
- 写给青春,写给军乐团
- php ftp 远程上传文件类
- zabbix 使用教程
- Meta 将使用微软 Azure 最新虚拟机 (VM) 系列,多达 5400 个 GPU
- Y400本本SSD装win10与机械硬盘上的系统组成双系统
- android存储视频文件夹在哪,Android 中 视频存储路径的一个方案
- java将一个url链接或者文字生成二维码并且转成base64
- 文献引用用 Bing学术最好
- ajax向后台传中文乱码问题
- python可以不对变量初始化_Python 可以不对变量如 a 初始化就可在表达式如 b=a+1 中使用该变量。...
- 计算机无法连接富士网络打印机,网络打印机无法连接的解决方法是什么