关于css一点笔记

时间  2020-11-30
标签 css html 浏览器 布局 字体 url 指针 code htm 对象 栏目 CSS 繁體版
原文   原文链接

css

1 .css基础选择器

1.1 css选择器的分类

选择器分为基础选择器和复合选择器两大类css

基础选择器

  • 基础选择器是由单个选择器组成的
  • 基础选择器包括标签选择器、类选择器、id选择器和通配符选择器
1.1.1标签选择器

标签选择器（元素选择器）是指用HTML标签名称做为选择器，按标签名称分类，为网页某一类标签制定统一的css样式html

优势：能够统一同类型标签样式浏览器

缺点：不能差别化布局

1.1.2 类选择器

能够选择一个或多个标签字体

。类名{
	属性1：属性2；
	。。。
}

将全部拥有red类的html元素均为红色

。red{
	color；red；
}

不过结构须要加上class属性来区分本身是哪一类的
<div class='red'>变红色 </div>
1.1.3 类选择器-多类名

一个标签能够指定多个类名url

  1. 使用方式指针

    <div class="red font20">亚瑟</div>

    class属性里能够写多个类名，但不一样类名之间必须用空格空开code

1.1.4 id选择器

id选择器能够为标有特定id的HTML元素指定特定的样式。htm

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的三种样式表

三大类

  1. 行内样式表
  2. 内部样式表
  3. 外部样式表

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结构语法（重要）

  1. 生成标签直接输入标签名摁回车或者TAB就行
  2. 若是想要生成多个相同标签，加上*就能够了，好比div *3就能够快速生成3个div
  3. 若是有父子级关系的标签，能够用 > 好比 ul> li就能够了
  4. 若是有兄弟关系的标签，用 + 就能够了 好比 div+p
  5. 若是生成带有类名或者id名字的，直接写.demo或者 #two tab 键就能够了
  6. 若是生成的div类名是有顺序的，能够用自增符号$再 * 几 就表明有几个顺序数
  7. 若是想生成的标签内部写内容能够用{ }表示

2.1.2 快速生成css样式格式

  1. 好比 w200按 回车 能够生成 width：200px；
  2. 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   /*选择活动连接（鼠标按下未弹起的连接）*/

注意事项

  1. 为了生效，请按照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块元素

特色

  1. 宽度高度内外边距均可以设置
  2. 独占一行
  3. 宽度默认是容器（父级宽度）100%
  4. 是容器，能够放别标签

4.1.2 行内元素

特色

  1. 相邻行内元素在一行，一行能够显示多个
  2. 高宽直接设置是无效的
  3. 默认宽度就是他自己内容的宽度
  4. 行内元素只能容纳文本或其它行内元素

4.1.3 行内块元素

特色

  1. 和相邻行内元素（行内块）在一行上，可是他们之间会有空白缝隙，一行能够显示多个（行内元素特色）
  2. 默认宽度就是它自己内容的宽度（行内元素特色）
  3. 高度，行高，外边距以及内边距均可以控制（块级元素特色）

例：

4.2 元素显示模式转换

转化为块元素： display：block；

转化为行内元素： display：inline；

转化为行内块： display：inline-block

小技巧：让文本在区间内垂直居中

只要让行高等于盒子高度就能够了

line-height=height

5.css背景

5.1 背景图片

控制位置很方便

background-image：url（）；

5.2 背景平铺

background-repeat

image-20201112151853701

5.3 背景图片位置（重要）

backgound-position属性能够改变图片在背景中的位置

image-20201112152305508

image-20201112152417171

image-20201112152456578

image-20201112152520764

5.4 背景半透明

backgroung：rgba（0，0，0，0.3）；
  • 最后一个参数是alpha透明度，取值在0~1之间

5.5 背景总结

image-20201113073413490

6 css三大特性

层叠性、继承性、优先级

6.1优先性

相同选择器选择相同的样式，此时一个样式会覆盖另外一个冲突的样式

  • 就近原则，哪一个样式离结构近，就执行哪一个样式

6.2继承性

子标签会继承父标签某些样式，如文本颜色和字号

能够继承（text-，font-，line-这些元素开头的能够继承，以及color属性）

6.2.1 行高的继承性

image-20201113083910041

6.3 优先级

一个元素指定多个选择器

  • 选择器相同，则执行层叠性
  • 选择器不一样，按权重

image-20201113084333631

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：

image-20201114110544045

运用实例：能够不设置盒子宽和高，用padding来撑开盒子，盒子大小就随文字而变。

7.3 margin

margin-left。。。。。。与padding一致

7.3.1 外边距典型应用（重要）

  1. 盒子必须指定宽度
  2. 盒子左右的外边距都设置了auto
div {
	width:960px; margin:上下边距 auto;
}

上述方法只能让块级元素居中，==行内元素和行内块元素水平居中给其父元素添加 text-align：center便可

7.3.2 嵌套块元素塌陷

解决方法

  1. 能够为父元素加上个边框
  2. 能够为父元素定义一个内边距
  3. 能够为父元素添加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 标准流

  1. 按照规定好的默认方式排列

9.2 浮动

浮动能够改变标签默认排列方式

语法
选择器 {
	float:属性值;
}
属性值 描述
none 元素不浮动（默认）
left 元素向左浮动
right 元素向右浮动

浮动特性

设置了浮动，会脱标，不保留原来位置

浮动元素会具备行内块元素特性

浮动元素常常和标准流父级一块儿用

来保证浮动元素不是按浏览器排

网页布局第一准则：左右浮动，上下标准

网页布局第二准则：先设置盒子大小，再设置盒子位置

浮动注意点

  1. 浮动和标准流的父盒子搭配
  2. 一个元素浮动了，理论上其他的兄第元素也要浮动

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：像素值；//他们结合起来用，以后的几种定位都是同样
}

特色：

  1. 若是父元素没有定位，则以浏览器为准定位
  2. 若是父元素有定位，则以最近一级的有定位祖先元素为参考点移动位置

10.3 相对定位

相对于他原来的位置

选择器 {position:relative}
  1. 他是相对于本身原来的位置来移动的
  2. 原来在标准流的位置继续占有
  3. 相对定位没有脱标，最典型的应用是给绝对定位当爹。

10.4 固定定位

position：fixed

以可视化窗口为参考对象

跟父元素不要紧

不随滚动条滚动

固定工位不占有原来的位置

11 .显示与隐藏元素

display属性

display：none;隐藏对象（位置也没了）

display：block；除了转化为块级元素以外，同时还有显示元素的意思

visibility可见性

visible可见

hidden隐藏（位置保留）

overflow溢出位置

visible显示

hidden隐藏

scroll溢出部分显示滚动条

auto在须要的时候添加滚动条

相关文章
相关标签/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公众号
   欢迎关注本站公众号,获取更多信息
联系我们 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程