前端复习2：CSS-1

最新推荐文章于 2023-10-30 16:36:20 发布

小小菜鸟2222

最新推荐文章于 2023-10-30 16:36:20 发布

阅读量332

点赞数

分类专栏：笔记文章标签： css

本文链接：https://blog.csdn.net/weixin_42476709/article/details/114688146

版权

笔记专栏收录该内容

1 篇文章 0 订阅

订阅专栏

前端复习2：CSS层叠样式表-1

1、HTML的局限性
2、CSS
3 Emmet语法

1、HTML的局限性

HTML满足不了设计者的需求
操作html属性不方便
HTML里面添加样式带来的是无尽的臃肿和繁琐

2、CSS

CSS的最大贡献就是：让 HTML 从样式中脱离，实现了 HTML 专注去做结构呈现，样式交给css，实现结构(html)与样式(css)相分离

2.1.介绍

（1）概念：CSS(Cascading Style Sheets) ，通常称为CSS样式表或层叠样式表（级联样式表）
（2）作用：主要用于设置 HTML页面中的文本内容（字体、大小、对齐方式等）、图片的外形（宽高、边框样式、边距等）以及版面的布局和外观显示样式。

2.2. 引入CSS样式表（书写位置）

2.2.1 行内式（内联样式，行内样式、行间样式.）
（1）是通过标签的style属性来设置元素的样式
（2）语法：

<标签名 style="属性1:属性值1; 属性2:属性值2; 属性3:属性值3;"> 内容 </标签名>

（3）缺点：没有实现样式和结构相分离

2.2.2内部样式表（内嵌样式表）
（1）是将CSS代码集中写在HTML文档的head头部标签中，并且用style标签定义
（2）语法：

<head>
<style type="text/CSS">
    选择器（选择的标签） { 
      属性1: 属性值1;
      属性2: 属性值2; 
      属性3: 属性值3;
    }
</style>
</head>

（3）注意：

style标签一般位于head标签中，当然理论上他可以放在HTML文档的任何地方。
type=“text/css” 在html5中可以省略。
只能控制当前的页

（4）缺点：没有彻底分离

2.2.3外部样式表（外链式,链入式）
（1）是将所有的样式放在一个或多个以**.CSS**为扩展名的外部样式表文件中，通过link标签将外部样式表文件链接到HTML文档中
（2）语法：

<head>
  <link rel="stylesheet" type="text/css" href="css文件路径">
</head>

（3）注意：
link 是个单标签，需要放在head头部标签中，并且指定link标签的三个属性

rel：定义当前文档与被链接文档之间的关系，在这里需要指定为“stylesheet”，表示被链接的文档是一个样式表文件。
type：定义所链接文档的类型，在这里需要指定为“text/CSS”，表示链接的外部文件为CSS样式表。我们都可以省略
href：定义所链接外部样式表文件的URL，可以是相对路径，也可以是绝对路径。

2.2.4 总结
在这里插入图片描述

2.3 CSS选择器

2.3.1 CSS选择器作用

选择标签，找到特定的HTML页面元素，把我们想要的标签选择出来
基础选择器、复合选择器

2.3.2 CSS基础选择器
（1）标签选择器

用HTML标签名称作为选择器，按标签名称分类，为页面中某一类标签指定统一的CSS样式。
语法：

标签名{属性1:属性值1; 属性2:属性值2; 属性3:属性值3; }

作用：可以把某一类标签全部选择出来比如所有的div标签和所有的 span标签
优点：是能快速为页面中同类型的标签统一样式
缺点：不能设计差异化样式

（2）类选择器

用“.”（英文点号）进行标识，后面紧跟类名
语法：

类名选择器：
.类名  {   
    属性1:属性值1; 
    属性2:属性值2; 
    属性3:属性值3;     
}
标签：
<p class='类名'></p>

优点：可以为元素对象定义单独或相同的样式。可以选择一个或者多个标签
类选择器特殊用法- 多类名：给标签指定多个类名，从而达到更多的选择目的。各个类名中间用空格隔开。

<div class="pink fontWeight font20">亚瑟</div>

（3） id选择器

用#进行标识，后面紧跟id名
语法：

id选择器：
#id名 {属性1:属性值1; 属性2:属性值2; 属性3:属性值3; }
标签：
<p id="id名"></p>

优点：可以为元素对象定义单独或相同的样式。元素的id值是唯一的，只能对应于文档中某一个具体的元素
一般用于页面唯一性的元素身上，经常javascript 搭配使用。

（4）通配符选择器

通配符选择器用*号表示， * 就是选择所有的标签，是所有选择器中作用范围最广的，能匹配页面中所有的元素。
语法：

：
* { 属性1:属性值1; 属性2:属性值2; 属性3:属性值3; }
标签：

常用于定义CSS样式，清除所有HTML标记的默认边距。

* {
  margin: 0;                    /* 定义外边距*/
  padding: 0;                   /* 定义内边距*/
}

会匹配页面所有的元素，降低页面响应速度，不建议随便使用

（5）总结
在这里插入图片描述
约定：

尽量少用通用选择器 *
尽量少用 ID 选择器
不使用无具体语义定义的标签选择器 div span

2.3.3 CSS复合选择器

由两个或多个基础选择器，通过不同的方式组合而成的。
目的：为了可以选择更准确更精细的目标元素标签。

（1）后代选择器（包含选择器）

作用：用来选择元素或元素组的子孙后代
写法：把外层标签写在前面，内层标签写在后面，中间用空格分隔，先写父亲爷爷，在写儿子孙子。
语法：

.class h3{color:red;font-size:16px;}

当标签发生嵌套时，内层标签就成为外层标签的后代。
能选择任何包含在内的标签。

（2）子元素选择器

作用：子元素选择器只能选择作为某元素**子元素(亲儿子)**的元素。
写法：把父级标签写在前面，子级标签写在后面，中间跟一个 > 进行连接
语法：

.class>h3{color:red;font-size:14px;}

这里的子指的是亲儿子不包含孙子重孙子之类。

（3）交集选择器

条件： - 交集选择器由两个选择器构成，找到的标签必须满足：既有标签一的特点，也有标签二的特点。
比如： p.one 选择的是：类名为 .one 的段落标签。
用的相对来说比较少，不太建议使用。

（4）并集选择器

如果某些选择器定义的相同样式，就可以利用并集选择器，可以让代码更简洁。
各个选择器通过,连接而成的，通常用于集体声明。
比如 .one, p , #test {color: #F00;} 表示 .one 和 p 和 #test 这三个选择器都会执行颜色为红色，通常用于集体声明。

（5）链接伪类选择器

用于向某些选择器添加特殊的效果。比如给链接添加特殊效果，比如可以选择第1个，第n个元素。
a:link /* 未访问的链接 /
a:visited / 已访问的链接 /
a:hover / 鼠标移动到链接上 /
a:active / 选定的链接 */ （鼠标选定未松开）
写的时候，他们的顺序尽量不要颠倒按照 lvha 的顺序。否则可能引起错误。
因为叫链接伪类，所以都是利用交集选择器 a:link a:hover
因为a链接浏览器具有默认样式，所以我们实际工作中都需要给链接单独指定样式。
拓展：:focus 伪类选择器用于选取获得焦点的元素，主要针对的是表单元素

/*这个input 获得了焦点*/
.total input:focus {
  width: 80px;
  border: 1px solid skyblue;
}

（6）复合选择器总结
在这里插入图片描述

2.4 CSS字体属性 font

2.4.1 font-size:大小
（1）作用：设置字号
（2）单位：可以使用相对长度单位，也可以使用绝对长度单位，相对长度单位比较常用，推荐使用像素单位px，绝对长度单位使用较少。
在这里插入图片描述
（3）谷歌浏览器默认的文字大小为16px，但是不同浏览器可能默认显示的字号大小不一致，我们尽量给一个明确值大小，不要默认大小。一般给body指定整个页面文字的大小

2.4.2 font-family:字体
（1）用于设置哪一种字体。
（2）语法：

p{font-family: Arial,"Microsoft Yahei", "微软雅黑";}

（3）中文字体需要加英文状态下的引号，英文字体一般不需要加引号。当需要设置英文字体时，英文字体名必须位于中文字体名之前。
（4）如果字体名中包含空格、#、$等符号，则该字体必须加英文状态下的单引号或双引号

2.4.3 font-weight:字体粗细
在这里插入图片描述
2.4.4 font-style:字体风格

2.4.5 font:综合设置字体样式

选择器 { font: font-style  font-weight  font-size/line-height  font-family;}

使用font属性时，必须按上面语法格式中的顺序书写，不能更换顺序，各个属性以空格隔开。
其中不需要设置的属性可以省略（取默认值），但必须保留font-size和font-family属性，否则font属性将不起作用。

2.4.6 font总结
在这里插入图片描述

2.5 CSS外观属性

2.5.1 color:文本颜色
（1）用于定义文本的颜色

2.5.2 text-align:文本水平对齐方式
（1）用于设置文本内容的水平对齐，相当于html中的align对齐属性
（2）left左对齐（默认值）、right右对齐、center居中对齐
（3）让盒子里面的内容水平居中，而不是让盒子居中对齐

2.5.3 line-height:行间距行高
（1）用于设置行间距，就是行与行之间的距离，即字符的垂直间距，一般称为行高
（2）
（3）单行文本垂直居中：文字的行高等于盒子的高度。上距离和下距离总是相等的，因此文字看上去是垂直居中的
行高 = 上距离 + 内容高度 + 下距离
在这里插入图片描述
行高和高度的三种关系

如果行高等高度文字会垂直居中
如果行高大于高度文字会偏下
如果行高小于高度文字会偏上
（4）line-height:1.5; 设置样式为1.5倍的行高
初始设font-size:12px;　那么line-height:1.5; 就相当于12*1.5＝18px;

2.5.4 text-indent:首行缩进
（1）用于设置首行文本的缩进，
（2）其属性值可为不同单位的数值、em字符宽度的倍数、或相对于浏览器窗口宽度的百分比%，允许使用负值,
（3）建议使用em作为设置单位。

p {
      /*行间距*/
      line-height: 25px;
      /*首行缩进2个字  em  1个em 就是1个字的大小*/
      text-indent: 2em;  
 }

2.5.5 text-decoration 文本的装饰

2.5.6 拓展—文字阴影text-shadow (CSS3)

text-shadow: h-shadow v-shadow blur color;
text-shadow: 5px 5px 5px #FF0000;

h-shadow 必需。水平阴影的位置。允许负值。测试
v-shadow 必需。垂直阴影的位置。允许负值。测试
blur 可选。模糊的距离。
color 可选。阴影的颜色

2.5.7 总结
在这里插入图片描述

2.6 标签显示模式（display）

什么是标签的显示模式：标签以什么方式进行显示，比如div 自己占一行，比如span 一行可以放很多个
作用：我们网页的标签非常多，再不同地方会用到不同类型的标签，以便更好的完成我们的网页。
标签的类型(分类)：HTML标签一般分为块标签和行内标签两种类型，它们也称块元素和行内元素。

2.6.1 块级元素(block-level)
（1）常见的块元素有<h1>~<h6>、<p>、<div>、<ul>、<ol>、<li>等，其中<div>标签是最典型的块元素。
（2）特点：

自己独占一行；
高度，宽度、外边距以及内边距都可以控制；
宽度默认是容器（父级宽度）的100%；
是一个容器及盒子，里面可以放行内或者块级元素。

（3）注意：

只有文字才能组成段落因此 p 里面不能放块级元素，特别是 p 不能放div
同理还有这些标签h1,h2,h3,h4,h5,h6,dt，他们都是文字类块级标签，里面不能放其他块级元素。

2.6.2 行内元素(inline-level)
（1）常见的行内元素有<a>、<strong>、<b>、<em>、<i>、<del>、<s>、<ins>、<u>、<span>等，其中<span>标签最典型的行内元素。有的地方也成内联元素
（2）特点：

相邻行内元素在一行上，一行可以显示多个；
高、宽直接设置是无效的；
默认宽度就是它本身内容的宽度；
行内元素只能容纳文本或则其他行内元素。

（3）注意：

链接里面不能再放链接
特殊情况a里面可以放块级元素，但是给a转换一下块级模式最安全。

2.6.3 行内块元素（inline-block）
（1）在行内元素中有几个特殊的标签——<img />、<input />、<td>，可以对它们设置宽高和对齐属性，有些资料可能会称它们为行内块元素。
（2）特点：

和相邻行内元素（行内块）在一行上,但是之间会有空白缝隙，一行可以显示多个；
默认宽度就是它本身内容的宽度；
高度，行高、外边距以及内边距都可以控制。

2.6.4 三种模式总结区别
在这里插入图片描述
2.6.5 标签显示模式转换 display

块转行内：display:inline;
行内转块：display:block;
块、行内元素转换为行内块： display: inline-block;

2.7 CSS 背景(background)

2.7.1 背景颜色(color)
（1）语法：

background-color:颜色值;   默认的值是 transparent  透明的

2.7.2 背景图片(image)
（1）语法：

background-image : none | url (url)

（2）none无背景图（默认的）；url使用绝对或相对地址指定背景图像
（3）提倡背景图片后面的地址，url不要加引号。

2.7.3 背景平铺（repeat）
（1）语法：

background-repeat : repeat | no-repeat | repeat-x | repeat-y

repeat背景图像在纵向和横向上平铺（默认的）；
no-repeat背景图像不平铺；
repeat-x背景图像在横向上平铺；
repeat-y背景图像在纵向平铺

2.7.4 背景位置(position)
（1）语法：

background-position : length || length
background-position : position || position

length：百分数 | 由浮点数字和单位标识符组成的长度值
positiontop ： center | bottom | left| center | right 方位名词

background-position: top right; //右上角

（2）注意：

必须先指定background-image属性
position 后面是x坐标和y坐标。可以使用方位名词或者精确单位。
如果指定两个值，两个值都是方位名字，则两个值前后顺序无关，比如left top和top left效果一致
如果只指定了一个方位名词，另一个值默认居中对齐。
如果position 后面是精确坐标，那么第一个，肯定是 x 第二的一定是y
如果只指定一个数值,那该数值一定是x坐标，另一个默认垂直居中
如果指定的两个值是精确单位和方位名字混合使用，则第一个值是x坐标，第二个值是y坐标

（3）实际工作用的最多的，就是背景图片居中对齐了。

2.7.5 背景附着
（1）解释背景是滚动的还是固定的
（2）语法：

background-attachment : scroll | fixed

scroll：背景图像是随对象内容滚动
fixed：背景图像固定

2.7.6 背景简写
（1）属性的值的书写顺序官方并没有强制标准的。为了可读性，建议大家如下写：
background: 背景颜色背景图片地址背景平铺背景滚动背景位置;
（2）语法：

background: transparent url(image.jpg) repeat-y  scroll center top ;

2.7.7 背景透明(CSS3)
（1）语法：

background: rgba(0, 0, 0, 0.3);

最后一个参数是alpha 透明度取值范围 0~1之间
我们习惯把0.3 的 0 省略掉这样写 background: rgba(0, 0, 0, .3);
注意：背景半透明是指盒子背景半透明，盒子里面的内容不受影响
因为是CSS3 ，所以低于 ie9 的版本是不支持的。

2.7.8 背景线性渐变(CSS3)
在这里插入图片描述

background: linear
gradient( 起始方向 颜色 1, 颜色 2, ...);
background:
webkit linear gradient(left, red , blue);
background:
webkit linear gradient(left top, red , blue);

背景渐变必须添加浏览器私有前缀
起始方向可以是：方位名词或者度数如果省略默认就是 top

2.7.9 总结
在这里插入图片描述

3 Emmet语法

Emmet的前身是Zen coding,它使用缩写,来提高html/css的编写速度。

生成标签直接输入标签名按tab键即可比如 div 然后tab 键，就可以生成 <div></div>
如果想要生成多个相同标签加上 * 就可以了比如 div*3 就可以快速生成3个div
如果有父子级关系的标签，可以用 > 比如 ul > li就可以了
如果有兄弟关系的标签，用 + 就可以了比如 div+p
如果生成带有类名或者id名字的，直接写 .demo 或者 #two tab 键就可以了
如果生成的div 类名是有顺序的，可以用自增符号 $

小小菜鸟2222

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
前端复习2：CSS-1

前端复习2：CSS层叠样式表-11、HTML的局限性2、CSS2.1.介绍2.2.骨架标签2.3 标签分类2.4 标签关系2.5 常用标签2.6 路径2.7 表格、表单、列表2.8 特殊字符1、HTML的局限性HTML满足不了设计者的需求操作html属性不方便HTML里面添加样式带来的是无尽的臃肿和繁琐2、CSSCSS的最大贡献就是：让 HTML 从样式中脱离，实现了 HTML 专注去做结构呈现，样式交给css，实现结构(html)与样式(css)相分离2.1.介绍HTML 指
复制链接

扫一扫