CSS3入门



介绍

https://www.runoob.com/css/css-tutorial.html

CSS特点:美化网页
  一般称为 CSS样式表

初始CSS

书写格式:
选择器{
    属性:值;
    ...
}

总结:选中正确的标签,设置正确的属性和值。

CSS书写位置

CSS—共有三种书写位置:行内式、内嵌式、外链式

行内式

直接写在标签的 style 属性中

格式:<标签 style="属性:值;属性:值;...">

内嵌式

将CSS代码内嵌在HTML文档的 style标签 中

格式:选择器{属性:值;属性:值;...}

外链式

使用 link 标签外链另一个CSS文件

image-20220616160406109

三种方式对比

image-20220616160740329

基础选择器

选择器的作用:从HTML文档中找到要设置样式的标签

基础选择器:标签选择器、id选择器、类选择器

标签选择器:

优点:一次性选择所有页面中的标签

缺点:不能个性化选择、设置标签

image-20220616161256235

id选择器

优点:能精确的选择标签

缺点:不能一次性选择多个标签

<style>
    #p1{
        color:red;
    }
</style>

<p id="p1">举头望明月,</p>

类选择器

使用标签中class属性的值将页面中的标签选出来

任何标签都有class属性,不同标签的class值可以是相同的

重点:在style标签中使用类选择器时必须在前面加上 .

<style>
    .red{
        color:red;
    }
</style>

<h1>静夜思</h1>
<p class="red">床前明月光,</p>
<p>疑是地上霜。</p>
<p class="red">举头望明月,</p>
<p>低头思故乡。</p>

优先级

image-20220616163136661

多类名

一个 class 属性可以同时设置多个值,类名之间使用空格进行分隔,每个类名的CSS样式都会生效

image-20220616165821222
通配符选择器

星号( * )就是通配符选择器,能够一次性选择页面中所有标签,但是会影响页面响应速度,不建议使用

样式的两个特性

  1. 层叠性:多个选择器设置的样式可以叠加在同一标签上

当样式出现冲突时,优先考虑权重;权重相同的情况下,采用就近原则

  1. 继承性:子标签继承父标签的某些样式

text- , font- , line- , color 这些会被继承

文字样式

image-20220616172148931

font-size

image-20220616173206069
image-20220616173216331

如果页面中没有使用css样式设置字体大小,则浏览器使用默认大小

font-family

用于设置文字采用的字体样式,例如:宋体、微软雅黑等等

font-weight

用来设置字体粗细,body{font-weight: bold;}

image-20220616175826303

font-style

字体倾斜,p{font-style: normal;},normal:正常(默认) | italic:倾斜

font连写

body {
    font: font-style  font-weight  font-size/line-height  font-family;
}

连写时,必须按上面的顺序书写,属性之间使用空格隔开。

font-style、font-weight 可以省略(一般不写)。

font-size、font-family 一般设置在body标签中。

图片描述

font: 12/1.5 字体大小为12px,行高为1.5倍

文本样式

image-20220616183411165

color

用于设置文本蓝色

<!-- 语法 -->
p {
    color: red;
}
image-20220616225833811

text-align

用于设置文本水平对齐位置,该属性只能用于占据整行的标签。

text-decoration

用于设置文本划线

  1. underline:下划线
  2. overline:上划线
  3. line-through:删除线
  4. none:没有划线
image-20220616231739597

text-indent

用于文本缩进,最常用与段落开始的两个空格

text-indent: 2em;

复合选择器

复合选择器就是使用多个基本选择器联合找到页面中的标签

子代选择器后代选择器交集选择器并集选择器

子代&后代选择器

image-20220616234826794
image-20220616235040534
image-20220616235526025

交集选择器

使用同—个标签中的两个选择器,同时选中—个标签

image-20220617000452682

并集选择器

并集选择器用来同时选中多个标签,并为这多个标签设置样式

image-20220617000643026

连接伪类

  • a 标签有四种状态,可分别设置样式:
    • a:link /* 未访问的链接 */
    • a:visited /* 已访问的链接 */
    • a:hover /* 鼠标悬浮在链接上 */
    • a:active /* 选定的链接 */

注意事项:

链接伪类:必须按顺序来写

实际项目中,只设置 a 标签基本样式 和 hover 伪类样式

选择器权重

image-20220617003337866

块元素和行内元素

HTML标签主要分为块标签和行内标签两种类型,也称为块元素和行内元素

块元素

快元素会独占一行,例如:<p>、<h1>、<div> 等。

行内元素不会占用整个一行,例如:<span>、<b>、<i> 等。

文字居中

左右居中:text-align: center

垂直居中:line-height

line-height 的值要等于height

行内元素

行内元素不能设置宽高

行内元素只能容纳文本或则其他行内元素,不能填充块元素

三种元素相互转环

image-20220617153907167
display:inline --> 将标签转为行内元素
display:block --> 将标签转为块元素
display:inline-block --> 将标签转为行内块
display:none --> 隐藏元素

字体图标和背景颜色

字体图标

进入阿里图标库:https://www.iconfont.cn/

span标签引入字体图标

背景颜色

background-color: 预定义/十六进制颜色/rgb(0,0,0)

背景图

background-image: url(路径)

背景图平铺
image-20220617163154260

background-repeat

可选值:repeat、no-repeat、repeat-x、repeat-y

CSS background-repeat 属性 (w3school.com.cn)

背景图位置

background-position: X轴 Y轴

image-20220617163411593
背景附着

背景附着就是背景是滚动的还是固定的

background-attachment:scroll fixed;
/* scroll 滚动 | fixed 固定 */

盒子模型

常用的html标签都可以看做是一个盒子,称为盒子模型

盒子由四部分组成:

  1. 外边距(margin):是元素与元素之间的距离,或者是元素外面留出的一段空白
  2. 内边距(padding):元素里的内容与元素边框之间的距离
  3. 边框(border):元素本身
  4. 内容(content):元素中放置的东西

边框

语法:border:border-width | border-style | border-color

image-20220617231736498

常见线型

image-20220617232518577

边框拆分写法

方位:top(上)、bottom(下)、left(左)、right(右)

其他:widht(粗细)、style(样式)、color(颜色)

圆角边框

border-dadius: length(可使用像素值或百分比)

内边距

内边距(padding):设置内容与边框之间的距离

image-20220618000018712

外边距

外边距(margin):设置元素之外的距离

盒子大小计算

image-20220618011400922
box-sizing

box-sizing:指定计算盒子宽高的方式,有两个可选值content-box(默认) 和 border-box;.

当设置为border-box时,width和height就是最终宽高,不再受padding影响

外边距塌陷

同—列上下两个元素相邻,并且上有margin-bottom,下有margin-top时,会发生塌陷。塌陷之后的margin取最大值

盒子阴影

image-20220618015137757
image-20220618015639726
div{
    width: 200px;height: 200px;
    background-color: pink;
    margin: 100px auto;
    box-shadow: 5px 5px 10px 5px rgba(0, 0, 0, 0.3);
}

列表样式

列表样式是针对 ul-li / ol-li 设置的样式

作用:去掉圆点、使用图片代替远点

list-style-typelist-style-imagelist-style

list-style-type:设置圆点(序号)样式

list-style-image:设置图片代替圆点

list-style:既能设置圆点样式,又能设置图片样式

浮动及清除浮动

css提供3种布局机制:

普通流(标准流)、浮动(float)、定位(positon)

普通流

普通流又叫标准流,是浏览器默认使用的方式

块元素从上向下的顺序排列

行内元素从左到右的顺序排列(碰到父元素边缘则自动换行)

浮动

让一行内容纳多个盒子

image-20220618164236101

浮动的核心:脱离普通流(标准流)的控制(漂浮)

image-20220618164344742

浮动后,会把本来占据的空间让给下一个元素

元素浮动后,会被转换为类似行内块的元素

浮动的元素互相贴靠一起的,但是如果父级宽度装不下这些浮动的盒子,多出的盒子会另起一行对齐

float:inherit;该属性为继承父元素的浮动属性

列表浮动

image-20220618191429889

清除浮动

image-20220618201312106
额外标签法

添加一个新标签,设置该标签清除浮动

clear : left | right | both

image-20220618201719929
父级添加overflow法

产生问题的父标签添加 overflow 属性

overflow: hidden | auto | sroll;
after 伪元素法

after伪元素法是额外标签法的升级版(推荐)

核心原理:利用CSS3的新特性自动创建一个叫做after的伪元素,再使用clear:both进行浮动清除

image-20220620165637849
双伪元素法

双伪元素是after伪元素的升级方法

核心原理:利用CSS3的新特性自动创建before和after两个伪元素,再使用clear:both进行浮动清处

image-20220620171200405

清除浮动细节

推荐用法

after伪元素法(京东)、双伪元素法(小米商城官网)。

伪元素法
.clearfix:after{
    content: "aaa";
    display: block;
    height: 0;
    clear: both;
    visibility: hidden;
}
.clearfix{
    *zoom:1;
}
双伪元素法
.clearfix:before,.clearfix:after{
    content: "";
    display: table;
}
.clearfix:after{
    clear: both;
}
.clearfix{
    *zoom:1;
}
隐藏

display: none;visibility: hidden; 的区别

visibility 方式隐藏的元素在页面中仍然占据空间

overflow 溢出
  • 设置父盒子宽高的情况:
image-20220620173428312
  • 父盒子只有宽没有高,且内部都是另一个浮动的盒子
    • hidden|auto : 清除浮动,父盒子自适应子盒子的高
    • scroll : 清除浮动,左侧和下方加滚动条

定位

将盒子在页面的某一个置(漂浮)

  • 定位由两部分组成:
    • 定位模式:相对定位绝对定位固定定位、静态定位
    • 边偏移:top、left、fight、bottom
image-20220620175555984

静态定位(static) 就是无定位,无法使用边便宜来调整盒子的位置。

相对定位

相对定位(relative)是元素相对于自己在标准流中原来的位置

不会放弃它在标准流中占据的位置

*{
    position: relative;
}

绝对定位

绝对定位(absolute)是以带有定位(相对、绝对、固定)的父级元素来计算定位位置

如果父元素没有定位,则找父级的父级,..…. 。如果都没有则会以浏览器为准定位

{
    position:absolute;
}

子绝父相

==子绝父相(口诀)∶子元素使用绝对定位,父元素使用相对定位==

父元素使用相对定位不脱标,更加方便页面布局。

子元素使用绝对定位退表,可以在父元素中随意定位。

固定定位

固定定位就是将盒子定位到页面的固定位置

固定定位也是投标,只认浏览器的可视窗口

{
    position: fixed;
}

堆叠

定位会让盒子重叠,后面的盒子会压住前面的盒子

z-index能够调整盒子的堆叠顺序,每个盒子默认值都是О

div {
    width: 200px;
    height: 200px;
}
.one {
    position: fixed;
    top: 0;
    left: 0;
    background-color: green;
    z-index: 1;
}
.two {
    position: fixed;
    top: 50px;
    left: 50px;
    background-color: gray;
}
.three {
    position: fixed;
    top: 100px;
    left: 100px;
    background-color: chocolate;
}
<div class="one"></div>
<div class="two"></div>
<div class="three"></div>

A标签CSS样式

a:link {color: red} /* 未访问的链接 */
a:visited {color: green} /* 已访问的链接 */
a:hover {color: black} /* 鼠标移动到链接上 */
a:active {color: yellow} /* 选定的链接,即鼠标按下去的时候不松开显示的状态 */

注意:有时候我们发现设置了上面的属性但是没有效果,这是因为他们是有顺序的

1、a:hover 必须被置于 a:link 和 a:visited 之后,才是有效的。

2、a:active 必须被置于 a:hover 之后,才是有效的。

总结来说就是 link、visited、hover、active。实际编写当中我们很容易不按顺序来写,这里需要特别注意

CSS3入门-HuaのJava之旅
CSS3入门
此内容为免费资源,请登录后查看
0
免费资源
© 版权声明
THE END
喜欢就支持一下吧
点赞0 分享
评论 抢沙发
头像
欢迎您留下宝贵的见解!
提交
头像

昵称

取消
昵称表情代码图片