关于css一点笔记
css
1 .css基础选择器
1.1 css选择器的分类
选择器分为基础选择器和复合选择器两大类
基础选择器
- 基础选择器是由单个选择器组成的
- 基础选择器包括标签选择器、类选择器、id选择器和通配符选择器
1.1.1标签选择器
标签选择器(元素选择器)是指用HTML标签名称作为选择器,按标签名称分类,为网页某一类标签制定统一的css样式
优点:可以统一同类型标签样式
缺点:不能差异化
1.1.2 类选择器
可以选择一个或多个标签
。类名{
属性1:属性2;
。。。
}
将所有拥有red类的html元素均为红色
。red{
color;red;
}
不过结构需要加上class属性来区分自己是哪一类的
<div class='red'>变红色 </div>
1.1.3 类选择器-多类名
一个标签可以指定多个类名
-
使用方式
<div class="red font20">亚瑟</div>
class属性里可以写多个类名,但不同类名之间必须用空格空开
1.1.4 id选择器
id选择器可以为标有特定id的HTML元素指定特定的样式。
HTML元素以id属性来设置id选择器,CSS中id选择器以“#”来定义
#id名 {
属性1:属性值1;
。。。
}
例如将id为nav的元素中的内容设置为红色。
#nav {
color : red;
}
1.1.5 类选择器和id区别
id选择器 样式#定义,结构id调用,只能调用一次
类就可以一直用、
1.1.6 通配符选择器
通配符使用“ * ”,定义,他表示选取页面中所有的元素(标签)。
语法
* {
属性1 : 属性值1;
。。。
}
通配符选择器不用调用,直接给所有元素使用样式
2 .css字体属性
css Font(字体)属性用于定义字体系列、大小、粗细、和文字样式(如斜体)。
2.1字体系列
css 使用font-family 属性定义文本的字体系列
p {
font-family:"微软雅黑";
}
div {
font-family:Arial,"Microsoft Yahei","微软雅黑";
}
2.2 大小
css中用 font-size属性定义字体大小
p {
font-size: 20px;
}
2.3 粗细
css使用font-weight属性设置weight属性设置文本字体的粗细
2.4字体样式(如斜体)
css使用 font-style 属性设置文本的风格
2.5字体复合属性
字体属性可以把以上文字样式综合来看,这样写可以更节约代码
例:
body {
font :font-style font-weight font-size/line-height font-family;
}
注:**不能更换顺序
比较麻烦,先不管了,有需要再看
总结
属性 | 表示 | 注意点 |
---|---|---|
font-size | 字号 | 我们通常用的单位是px像素,一定要跟上单位 |
font-size | 字体 | 实际工作中按照团队约定来写字体 |
font-weight | 字体粗细 | 记住加粗是700不加粗是400(数字后不跟单位) |
font-style | 字体样式 | italic是倾斜 |
font | 字体连写 | 字体连写是有顺序的 |
3.css文本属性
文本属性可定义文本的外观,比如文本的颜色、对齐文本、装饰文本、文本缩进、行间距等
3.1 文本颜色
color属性用于定义文本的颜色
div {
color :red;
}
3.2 对齐文本
text-align属性用于设置元素内文本内容的水平对齐方式
div {
text-align: center;
}
3.3 装饰文本
text-decoration属性规定添加到文本的修饰,可以给文本添加下划线、删除线、上划线等
属性值 | 描述 |
---|---|
underline | 下划线 |
overline | 上划线 |
line-through | 删除线 |
3.4文本缩进
text-indent 属性用于指定文本的第一行缩进,通常是将段落的首行缩进
3.5 行间距
line-height 属性用于设置行间的距离(行高),可以控制文字行与行之间的距离
p {
line-height:26px;
}
3.6 总结
属性 | 表示 | 注意点 |
---|---|---|
color | 文本颜色 | 我们通常用 十六进制 |
text-align | 文本对齐 | 可以设定文字水平的对齐方式 |
text-indent | 文本缩进 | 通常我们用于段落首行缩进2个字的距离 text-indent:2em |
text-decoration | 文本修饰 | 记住添加下划线 underline 取消下划线 none |
line-height | 行高 | 控制行与行之间的距离 |
4.css引入方式
4.1css的三种样式表
三大类
- 行内样式表
- 内部样式表
- 外部样式表
4.1.1内部样式表
是将所有css代码抽取出来放到《style》标签中,并写在html页面内部
4.1.2行内样式表
直接在标签内加入style属性
4.1.3外部样式表
<link rel="stylesheet" href="css路径">
2 css第二天
2.1 emmet语法
可以使用缩写来提高编写速度
2.1.1 快速编写html结构语法(重要)
- 生成标签直接输入标签名摁回车或者TAB就行
- 如果想要生成多个相同标签,加上*就可以了,比如div *3就可以快速生成3个div
- 如果有父子级关系的标签,可以用 > 比如 ul> li就可以了
- 如果有兄弟关系的标签,用 + 就可以了 比如 div+p
- 如果生成带有类名或者id名字的,直接写.demo或者 #two tab 键就可以了
- 如果生成的div类名是有顺序的,可以用自增符号$再 * 几 就代表有几个顺序数
- 如果想生成的标签内部写内容可以用{ }表示
2.1.2 快速生成css样式格式
- 比如 w200按 回车 可以生成 width:200px;
- lh26 按回车 可以生成 line-height:26px;
3.css复合选择器
1.1 后代选择器(重要)
后代选择器又称为包含选择器,可以选择父元素里的子元素,其写法就是把外层标签写到前面,内层标签写在后面,中间用空格分隔,当标签发生嵌套时,内层标签就成了外层标签的后代
标签1 标签2 {
asjd
}
上述语法表示选择元素1里面所有的元素2
1.2 子选择器(重要)
子元素选择器(子选择器)只能选择作为某个元素的最近一级子元素,简单理解就是说选亲儿子元素
元素1>元素2 {
sasaf
}
1.3 并集选择器(重要)
并集选择器可以同时选择多组标签,为他们定义相同的样式,通常用于集体声明
1.4 伪类选择器(重要)
伪类选择器用于向某些选择器添加特殊的效果,比如给链接添加特殊效果,或选择第一个,第n个元素
伪类选择器用“ : ”表示
1.4.1 链接伪类
a:link /*选择所有未被访问的链接*/
a:visited /*选择所有已被访问的链接*/
a:hover /*选择鼠标指针位于其上的链接*/
a:active /*选择活动链接(鼠标按下未弹起的链接)*/
注意事项
- 为了生效,请按照LVHA的顺序声明:link :visited :hover :active下
1.4.2 foucs伪类选择器
用于选取获得焦点的元素(即光标)一般都是input类表单元素才有
input:foucs {
background-color:yellow;
}
总结
选择器 | 作用 | 特征 | 使用情况 | 隔开符号及用法 |
---|---|---|---|---|
后代选择器 | 用来选择后代元素 | 可以是子孙后代 | 较多 | 符号是空格 .nav a |
子代选择器 | 选择最近一级元素 | 只能选亲儿子 | 较少 | 符号是大于 .nav>p |
并集选择器 | 选择某些相同样式的元素 | 可以用于集体声明 | 较多 | 符号是逗号 .nav,header |
链接伪类选择器 | 选择不同状态的链接 | 跟链接相关 | 较多 | 重点记住a{}和a:hover实际开发的写法 |
focus选择器 | 选择获得光标的表单 | 跟表单相关 | 较少 | input:foucs 记住这个写法 |
4.css的元素显示模式
4.1 什么是元素的显示模式
元素显示模式就是元素(标签)以什么方式进行显示
HTML元素一般分为块元素和行内元素两类
4 .1.1块元素
特点
- 宽度高度内外边距都可以设置
- 独占一行
- 宽度默认是容器(父级宽度)100%
- 是容器,可以放别标签
4.1.2 行内元素
特点
- 相邻行内元素在一行,一行可以显示多个
- 高宽直接设置是无效的
- 默认宽度就是他本身内容的宽度
- 行内元素只能容纳文本或其它行内元素
4.1.3 行内块元素
特点
- 和相邻行内元素(行内块)在一行上,但是他们之间会有空白缝隙,一行可以显示多个(行内元素特点)
- 默认宽度就是它本身内容的宽度(行内元素特点)
- 高度,行高,外边距以及内边距都可以控制(块级元素特点)
例:
4.2 元素显示模式转换
转化为块元素: display:block;
转化为行内元素: display:inline;
转化为行内块: display:inline-block
小技巧:让文本在区间内垂直居中
只要让行高等于盒子高度就可以了
line-height=height
5.css背景
5.1 背景图片
控制位置很方便
background-image:url();
5.2 背景平铺
background-repeat
5.3 背景图片位置(重要)
backgound-position属性可以改变图片在背景中的位置
5.4 背景半透明
backgroung:rgba(0,0,0,0.3);
- 最后一个参数是alpha透明度,取值在0~1之间
5.5 背景总结
6 css三大特性
层叠性、继承性、优先级
6.1优先性
相同选择器选择相同的样式,此时一个样式会覆盖另一个冲突的样式
- 就近原则,哪个样式离结构近,就执行哪个样式
6.2继承性
子标签会继承父标签某些样式,如文本颜色和字号
可以继承(text-,font-,line-这些元素开头的可以继承,以及color属性)
6.2.1 行高的继承性
6.3 优先级
一个元素指定多个选择器
- 选择器相同,则执行层叠性
- 选择器不同,按权重
7 盒子模型
边框border
内容content
外边距margin
内边距padding
7.1 border
border-width 定义边框粗细,单位是px
border-style 边框的样式
border-color 边框颜色
border-collapse:collapase; 合并边框
7.2 padding
padding-left
padding-right
padding-top
padding-bottom
复合写法:padding:
运用实例:可以不设置盒子宽和高,用padding来撑开盒子,盒子大小就随文字而变。
7.3 margin
margin-left。。。。。。与padding一致
7.3.1 外边距典型应用(重要)
- 盒子必须指定宽度
- 盒子左右的外边距都设置了auto
div {
width:960px; margin:上下边距 auto;
}
上述方法只能让块级元素居中,==行内元素和行内块元素水平居中给其父元素添加 text-align:center即可
7.3.2 嵌套块元素塌陷
解决方法
- 可以为父元素加上个边框
- 可以为父元素定义一个内边距
- 可以为父元素添加overflow:hidden.
清楚内外边距
不同浏览器自带的不同,所以干脆把所有边距清零
* {
padding:0;
margin:0;
}
额外补充去掉列表前符号用list-style :none;
8。圆角边框
border-radius:length;
radius半径(圆的半径)原理:(椭)圆与边框的交际形成圆角效果
border-radius:属性;属性可以有四个,顺时针 左上-》右上-》右下-》左下
也可以分开写border-top-left-radius左上角,必须top在前面
7.盒子阴影
语法
box-shadow:h-shadow v-shadow blur spread color inset;
值 | 描述 |
---|---|
h-shadow | 必需。水平阴影的位置,允许负值 |
v-shadow | 必需。垂直阴影的位置,允许负值 |
blur | 可选。模糊距离 |
spread | 可选。阴影的尺寸 |
color | 可选。阴影的颜色,请查阅css颜色值 |
inset | 可选,将外部阴影(outset)改为内部阴影 |
8.文字阴影
text-shadow
text-shadow:h-shadow v-shadow blur color;
值 | 描述 |
---|---|
h-shadow | 必须水平阴影的位置,允许负值 |
v-shadow | 必须,垂直阴影的位置,允许负值 |
blur | 可选。模糊的距离 |
color | 可选。阴影的颜色 |
9.浮动
- 普通流
- 浮动
- 定位
9.1 标准流
- 按照规定好的默认方式排列
9.2 浮动
浮动可以改变标签默认排列方式
语法
选择器 {
float:属性值;
}
属性值 | 描述 |
---|---|
none | 元素不浮动(默认) |
left | 元素向左浮动 |
right | 元素向右浮动 |
浮动特性
设置了浮动,会脱标,不保留原来位置
浮动元素会具有行内块元素特性
浮动元素经常和标准流父级一起用
来保证浮动元素不是按浏览器排
网页布局第一准则:左右浮动,上下标准
网页布局第二准则:先设置盒子大小,再设置盒子位置
浮动注意点
- 浮动和标准流的父盒子搭配
- 一个元素浮动了,理论上其余的兄第元素也要浮动
9.3清除浮动
- 如果父盒子有高度则不需要清除浮动
- 清除浮动后,符集会根据浮动的子盒子自动检测高度。父级有了高度就不会影响下面的标准流
选择器 { clear:属性值;}
属性值 | 描述 |
---|---|
left | 不允许左侧有浮动元素(清除左侧浮动影响) |
right | 不允许右侧有浮动元素 |
both | 同时清除左右两侧浮动的影响 |
在实际工作中几乎只用both
一般都是在浮动元素后面再增加一个空元素,为这个空元素定义“clear:both”
10。定位
定位布局
position来实现四种方式
属性值 | 说明 |
---|---|
fixed | 固定定位 |
relative | 相对定位 |
absolute | 绝对定位 |
static | 静态定位(默认值) |
10.1 静态定位
了解一下,现在不重要
10.2 绝对定位
绝对定位是相对它父元素来说
选择器 {
position:absolute;
top:像素值;
bottom:像素值;
left:像素值;
right:像素值;//他们结合起来用,之后的几种定位都是一样
}
特点:
- 如果父元素没有定位,则以浏览器为准定位
- 如果父元素有定位,则以最近一级的有定位祖先元素为参考点移动位置
10.3 相对定位
相对于他原来的位置
选择器 {position:relative}
- 他是相对于自己原来的位置来移动的
- 原来在标准流的位置继续占有
- 相对定位没有脱标,最典型的应用是给绝对定位当爹。
10.4 固定定位
position:fixed
以可视化窗口为参考对象
跟父元素没关系
不随滚动条滚动
固定工位不占有原来的位置
11 .显示与隐藏元素
display属性
display:none;隐藏对象(位置也没了)
display:block;除了转化为块级元素之外,同时还有显示元素的意思
visibility可见性
visible可见
hidden隐藏(位置保留)
overflow溢出位置
visible显示
hidden隐藏
scroll溢出部分显示滚动条
auto在需要的时候添加滚动条