Web前端之CSS（1）——概述

最新推荐文章于 2022-11-05 19:45:35 发布

百里一兔

最新推荐文章于 2022-11-05 19:45:35 发布

阅读量629

点赞数

分类专栏： Web_CSS 文章标签： 20190903

本文链接：https://blog.csdn.net/lb569484787/article/details/100512314

版权

Web_CSS 专栏收录该内容

11 篇文章 0 订阅

订阅专栏

一.CSS3概述

1.什么是CSS
Cascading style sheets 层叠样式表、级联样式表.简称样式表

2.CSS的作用
设置HTML网页中元素的样式

3.HTML与CSS的关系
HTML：负责网页的搭建，内容展示-----一个页面骨架
CSS：负责网页的修饰，样式的构建-----给网页化妆

4.HTML属性与CSS的使用原则
W3C建议我们尽量使用css的方式来取代HTML属性
CSS样式：
a.样式代码高度重用
b.方便后期的维护，提高了可维护性

二.CSS的语法规范

1.使用css的方式
（1）行内样式/内联样式
将css样式定义在html标签中

<any style="样式声明" ></any>

样式声明：样式属性:值;
样式属性：值 color:red;
内联样式开发中基本不用，只在学习和测试的使用
内联样式无法重用，内联样式优先级最高

常用的样式：
1°设置文本颜色
color:合法的颜色值(颜色的单词)
2°设置字体的大小
font-size:以px为单位的数字
3°背景颜色
background:合法的颜色值

<!DOCTYPE html>
<html>
<head>
	<title>zzz</title>
	<meta charset="utf-8"/>
	<!-- 内部样式 --> 
	<style >
		div{
			color: purple;
		}
		
	</style>
</head>
<body>
	<!--内部样式结果  -->
	<div>陟罚臧否</div>
	<div>魑魅魍魉</div>

</body>
</html>

2.内部样式
在网页head标签中创建style标签，在style标签内部定义样式

<style>
  样式规则1;
  样式规则2;
</style>

样式规则：由选择器和样式声明组成。

div{color:purple;}

元素选择器，由元素名称作为选择器。
页面上匹配这个元素的名称元素，都可以使用该样式。
特点：
只能在本页面重用，其它页面无法重用，重用效果有限。
开发中少用，学习和测试中使用较多。

3.外部样式
独立于任何网页，声明一个样式文件(*.css)
在.css中保存样式规则
使用步骤
（1）创建样式表文件.css
（2）在css文件中编写样式规则
（3）在网页的头部引入css文件

<link href="css的url"  rel="stylesheet">

练习
创建01_ex.html,ex1.css
在ex1.css中，h4字体颜色为橙色orange 背景使用绿色
字体大小36px
在01_css.html和01_ex.html中引用ex1.css
并编写h4标签，内容随意
更改css中的字体大小为24px，字体颜色为红色，观察效果

2.CSS特性
（1）继承性
大部分的css效果是可以直接被继承的。
必须父子结构(有层级嵌套)，子继承父。
（注：a标签的color不继承）

（2）层叠性
可以为一个元素定义多个样式规则。
规则中属性不冲突(不重复)时，多个样式可以同时应用到当前元素上。

（3）优先级
如果多个样式声明冲突，按照样式规则的优先级应用样式。
最高：内联样式
内部样式和外部样式，就近原则
最低：浏览器默认样式

（4）调整样式优先级
!important规则
放在属性值之后，与值之间用空格隔开。
作用:调整优先级，使用之后优先级提升。

练习：
02_ex.html添加一个p元素，内容自定，
内部样式设置文字颜色blue,字体大小24px
外部样式设置字体大小40px,字体颜色red，引用外部样式
查看页面效果，改变内部样式与外部样式调用的位置
再次查看页面效果
尝试使用!important改变样式优先级

三.基础选择器(重点*********)

1.选择器的作用
规范了页面中哪些元素能够使用定义好的样式，的条件
为了匹配元素

2.选择器详解
（1）通用选择器
匹配页面上所有的元素

*{样式声明}

效率极低，项目中少用，
唯一使用的方式

*{margin:0;padding:0}所有元素内外边距清0      ！！！必须记下来！！！

（2）元素选择器，标签选择器
设置页面中某种元素的默认样式

div{}
p{font-size:12px;}

（3）id选择器
设置指定id元素的样式(专属的定制)

#d1{color:red;}
<div id="d1"></div>

（4）类选择器
定义页面上某个或者某类元素的样式（公共样式，谁想用都可以）
.类名{样式声明}

<any class="类名"></any>

！！！注意:类名
1°点不能省略
2°不能以数字开头
3°不能包含特殊字符(除了- _)

多类选择器
让一个元素引用多个类选择器，多个类名之间使用空格隔开

<p class="my_font   my_color    my_bg">

分类选择器
将元素选择器和类选择结合的一种使用方式

元素选择器.类选择器{样式声明}

<h4 class="my_font">

h4.my_font{background:pink;}

特点:
1.指向更精准
2.优先级更高

练习
03_ex.html 添加div和p，内容随意
用类选择器为所有元素设置字体颜色为红色.fontcolor
用分类选择器为p标签设置背景颜色为yellow

5.群组选择器
将多个选择器放到一起定义公共的样式
选择器1，选择器2，选择器3,…{样式声明}

div,p,#s1,p.my_font{
  color:#006699;
  background:#990066;
}

6.后代选择器
通过元素的后代关系匹配元素
后代：一级或者多于一级的嵌套关系

语法:选择器1 选择器2 选择器3....{样式的声明}

7.子代选择器
通过元素的子代(一级嵌套)关系匹配元素

选择器1>选择器2>选择器3....{样式声明}

练习：

<div  id='d1'>
  <span>111</span>
  <div>
     <span>222</span>
  </div>
  <div>
     <div>
        <span>333</span>
     </div>
  </div>
</div>

1.所有span
div span{}或者span{}

2.只修改第一个span
#d1>span{color:red;}

3.只修改第二个span
#d1>div>span{color:red;}

4.只修改第三个span
#d1>div>div>span{color:red;}

5.修改后两个span
#d1>div span{color:red;}

8.伪类选择器
匹配元素的不同状态的选择器
选择器:伪类选择器{} 在这个标签的某一个状态下，才应用此样式
（1）链接伪类
a:link{color:red;} 没有被访问过的状态
a:visited{color:pink;}被访问之后的状态

（2）动态伪类
a:active{font-style:italic;}元素被激活状态
input:focus{background:black;color:white;}匹配元素获取焦点时
img:hover{width:100px;}匹配元素被鼠标悬停时

爱恨原则：love——先写link再写visited 而 hate——先写hover再写active

练习
1.在03_ex中，添加一个a标签，内容随意。
未访问时，字体为黑色，去掉下滑线(text-decoration:none)
鼠标悬停时，文本变成红色，字体变成40px
被激活后，文字变成绿色，字体大小80px
访问后，颜色变为橙色

2.创建一个文本框输入框，默认字体为灰色gray，斜体
被激活是，字体为非斜体 font-style:normal
获取焦点时，字体变为红色

9.选择器的权值
权值，表示当前选择器的重要程度，权值越大优先级越高
!important >1000
内联样式 1000
id选择器 100
类和伪类 10
元素选择器 1
*通用选择器 0
继承的样式无

（1）当一个选择器含有多个选择器时，需要将所有的选择器的权值进行相加
然后再比较，权值高的优先级高

（2）分组选择器权值不相加，单独计算

（3）权值的计算不会超过其最大数量（100个1加在一起，不会大于一个10）

（4）样式后面添加！important,该样式直接获得最高优先级

内联样式不能添加!important

（5）权值相同，按照就近原则

四.尺寸和边框

1.尺寸属性
width
最大宽度max-width
最小宽度min-width
height
max-height
min-height

取值：
（1）以px为单位的数字
（2）%，相对单位，占据父元素尺寸的百分比

总结：页面中允许设置尺寸的元素
1.所有的块级元素都可以设置
2.行内块都可以设置
input(单选框和复选框不能设置)
3.本身具有width和height属性的元素，可以设置
table,img
大部分的行内元素都不允许设置尺寸

❤附加知识点单位❤
1.px 像素
2.in 英寸 1in=2.54cm
3.pt 磅值，一般修饰字体大小 1pt=1/72in
4.cm
5.mm
6.em 相对于父级设置的尺寸乘以的倍数(1.5em)
7.rem相对于根元素设置的尺寸乘以的倍数(1.5rem)
8.%

❤附加知识点 合法颜色值❤
1.颜色的英文单词 red blue yellow gray …
2.#rrggbb 取值 16进制 r:0~ff g:0~ff b:0~ff
3.#aabbcc 简写成#abc
4.rgb(0_255,0255,0~255);
5.rgb(r%,g%,b%);
6.rgba(r,g,b,a)
a:alpha 透明度（0-1） 1：不透明 0：透明

五、作业

1.创建a标签，定义id=a1
未被访问，字体红色，字号32px，斜体，无下划线
激活，字体蓝色，字号50px，取消斜体，添加背景色黄色
访问后，字体#0ff 字号24px ,取消斜体
鼠标悬停，字体#f0f 字号80px 取消斜体，添加背景色原谅色

text-decoration:none;//取消下划线
italic  //斜体   
normal  //常体

2.8种选择器，总结到脑图
3.优先级+权值
4.合法的颜色值

百里一兔

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Web前端之CSS（1）——概述

一.CSS3概述1.什么是CSSCascading style sheets 层叠样式表、级联样式表.简称样式表2.CSS的作用设置HTML网页中元素的样式3.HTML与CSS的关系HTML：负责网页的搭建，内容展示-----一个页面骨架CSS：负责网页的修饰，样式的构建-----给网页化妆4.HTML属性与CSS的使用原则W3C建议我们尽量使用css的方式来取代HTML属性C...
复制链接

扫一扫