关闭页面特效

CSS3

0|1CSS概念


层叠样式表(英文全称:Cascading Stle Sheets)是一种用来表现HTML(标准通用标记语言的一个应用)或XML(标准通用标记语言的一个子集)等文件样式的计算机语言。CSS不仅可以静态地修饰网页,还可以配合各种脚本语言动态地对网页各元素进行格式化。

0|1一、CSS简介


什么是CSS

  • CSS:全称:Cascading Style Sheets 层叠样式表定义如何显示HTML元素
  • 多个样式可以层层覆盖叠加,如果不同的CSS样式对同-html标签进行修饰,样式有冲突的 应用优先级高的,不冲突的共同作用

CSS能干什么

  • 修饰美化html网页。
  • 外部样式表可以提高代码复用性从而提高工作效率。
  • html内容与样式 表现分离,便于后期维护。

CSS书写规范

CSS规则由两个主要的部分构成:选择器,以及一条或多条声明

选择器通常是您需要改变样式的HTML元素

每条声明由一个属性和一个值组成。

基础语法

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

img

注意事项: 请使用胡括号来包围声明 如果值为若干单词,则要给值加引号 多个声明之间使用分号;分开 css对于大小写不敏感,如果涉及到与html文档一起使用时,classid名称对大小写敏感

0|1二、CSS导入方式


内嵌方式(内联方式 )

把CSS样式嵌入到html标签中,类似属性的用法

<div style="color:blue;font-size:50px">This is my HTML page.</div>

内部方式

在head标签中使用style标签引入css

<style type="text/css"> div{color:red;font-size:50px} </style>

外部方式

将css样式抽成一个单独文件,使用者直接引用

创建单独文件 div.css 内容示例:div{color:green;font-size:50px} 引用语句写在head标签内部 <link rel="stylesheet" type="text/css" href="div.css"></link> rel:代表当前页面与href所指定文档的关系 type:文件类型,告诉浏览器使用css解析器去解析 href:css文件地址

@import方式

在页面中引入一个独立的单独文件

<style type="text/css"> @import url("div.css") </style>
link@import方式的区别: link所有浏览器都支持,@import某些版本低的IE不支持 @import是等待html加载完成才加载 @import不支持js动态修改

0|1三、CSS选择器


主要用于选择需要添加样式的html元素

基本选择器

元素选择器:在head中使用style标签引入在其中声明元素选择器:html标签(属性:属性值)

<style type="text/css"> span{color:red;font-size:100px} </style>

id选择器:给需要修改样式的html元素添加di属性标识,在head中使用style标签引入在其中声明id选择器:#id值{属性:属性值}

创建id选择器: <div id="s1">hello,everyone!</div> <div id="s2">hello,everyone!</div> <div id="s3">hello,everyone!</div> 根据id选择器进行html文件修饰 <style type="text/css"> #s1{color:red;font-size:100px} #s2{color:green;font-size:100px} #s3{color:blue;font-size:100px} </style>

class选择器:给需要修改样式的html元素添加class属性样式标识,在head中使用style标签引入在其中声明class选择器:class名{属性:属性值}

创建class选择器: <div class="s1">hello,everyone!</div> <div class="s2">hello,everyone!</div> <div class="s3">hello,everyone!</div> 根据class选择器进行html文件修饰: <style type="text/css"> .s1{color:purple;font-size:100px} .s2{color:pink;font-size:100px} .s3{color:yellow;font-size:100px} </style>

备注:以上选择器的优先级从高到低:id选择器,class选择器,元素选择器

属性选择器

根据元素的属性及属性值来选择元素。在head中使用style标签引入在其中声明 格式为: htm标签[属性='属性值']{css属性:css属性值;} html标签[属性]{css属性:css属性值;}
body内容: <form name="login" action="#" method="get"> <font size="3">用户名:</font> <input type="text" name="username" value="zhangsan"><br> <font size="3">密码</font> <input type="password" name="password" value="123456"><br/> </form> head中书写: <style type="text/css"> input[type='text']{ background-color:pink; } input[type='password']{ background-color:yellow; } font[size]{ color:green; } a[href]{ color:blue; } /*name以h开头的a标签*/ a[name^="h"]{ color:red; } /*name以h结束的a标签*/ a[name$="h"]{ color:red; } </style>

伪对象选择器

<style type="text/css"> /*伪类选择器在指定的对象之前或者之后插入内容*/ .div1:before{ content:url(img/1.jpg); } .div1:after{ content:url(img/1.jpg); } </style>

伪元素选择器

主要是针对a标签 语法: 静止状态a:link{css属性} 悬浮状态a:hover{css属性} 触发状态:a:active{css属性} 完成状态:a:visited{css属性} 设置伪类的顺序:a:link->a:visited->a:hover->a:active
代码: <a href="https://hao.360.cn/">点我吧</a> 样式: <style type="text/css"> <!--静止状态--> a:link{color:red;} <!--悬浮状态--> a:hover{color:green;} <!--触发状态--> a:active{color:yellow;} <!--完成状态--> a:visited{color:blue;} </style>

层级选择器

父级选择器 子级选择器......,具体示例如下:

<div id="div1"> <div class="div11"> <span>span1-1</span> </div> <div class="div12"> <span>span1-2</span> </div> </div> <div class="div2"> <div id="div22"> <span>span2-1</span> </div> <div id="div23"> <span>span2-2</span> </div> </div>
<style type="text/css"> #div1 .div11{color:red;} #div1 .div12{color:purple;} .div2 #div22{color:green;} .div2 #div23{color:blue;} </style>

高级选择器

img

img

img

例子 例子描述
.intro 选择 class="intro" 的所有元素。
.name1.name2 选择 class 属性中同时有 name1 和 name2 的所有元素。
.name1 .name2 选择作为类名 name1 元素后代的所有类名 name2 元素。
#firstname 选择 id="firstname" 的元素。
* 选择所有元素。
p 选择所有 <p> 元素。
p.intro 选择 class="intro" 的所有 <p> 元素。
div, p 选择所有 <div> 元素和所有 <p> 元素。
div p 选择 <div> 元素内的所有 <p> 元素。
div > p 选择父元素是 <div> 的所有 <p> 元素。
div + p 选择紧跟 <div> 元素的首个 <p> 元素。
p ~ ul 选择前面有 <p> 元素的每个 <ul> 元素。
[target] 选择带有 target 属性的所有元素。
[target=_blank] 选择带有 target="_blank" 属性的所有元素。
[title~=flower] 选择 title 属性包含单词 "flower" 的所有元素。
[lang|=en] 选择 lang 属性值以 "en" 开头的所有元素。
a[href^="https"] 选择其 src 属性值以 "https" 开头的每个 <a> 元素。
a[href$=".pdf"] 选择其 src 属性以 ".pdf" 结尾的所有 <a> 元素。
a[href*="w3school"] 选择其 href 属性值中包含 "abc" 子串的每个 <a> 元素。
a:active 选择活动链接。
p::after 在每个 <p> 的内容之后插入内容。
p::before 在每个 <p> 的内容之前插入内容。
input:checked 选择每个被选中的 <input> 元素。
input:default 选择默认的 <input> 元素。
input:disabled 选择每个被禁用的 <input> 元素。
p:empty 选择没有子元素的每个 <p> 元素(包括文本节点)。
input:enabled 选择每个启用的 <input> 元素。
p:first-child 选择属于父元素的第一个子元素的每个 <p> 元素。
p::first-letter 选择每个 <p> 元素的首字母。
p::first-line 选择每个 <p> 元素的首行。
p:first-of-type 选择属于其父元素的首个 <p> 元素的每个 <p> 元素。
input:focus 选择获得焦点的 input 元素。
:fullscreen 选择处于全屏模式的元素。
a:hover 选择鼠标指针位于其上的链接。
input:in-range 选择其值在指定范围内的 input 元素。
input:indeterminate 选择处于不确定状态的 input 元素。
input:invalid 选择具有无效值的所有 input 元素。
p:lang(it) 选择 lang 属性等于 "it"(意大利)的每个 <p> 元素。
p:last-child 选择属于其父元素最后一个子元素每个 <p> 元素。
p:last-of-type 选择属于其父元素的最后 <p> 元素的每个 <p> 元素。
a:link 选择所有未访问过的链接。
:not(p) 选择非 <p> 元素的每个元素。
p:nth-child(2) 选择属于其父元素的第二个子元素的每个 <p> 元素。
p:nth-last-child(2) 同上,从最后一个子元素开始计数。
p:nth-of-type(2) 选择属于其父元素第二个 <p> 元素的每个 <p> 元素。
p:nth-last-of-type(2) 同上,但是从最后一个子元素开始计数。
p:only-of-type 选择属于其父元素唯一的 <p> 元素的每个 <p> 元素。
p:only-child 选择属于其父元素的唯一子元素的每个 <p> 元素。
input:optional 选择不带 "required" 属性的 input 元素。
input:out-of-range 选择值超出指定范围的 input 元素。
input::placeholder 选择已规定 "placeholder" 属性的 input 元素。
input:read-only 选择已规定 "readonly" 属性的 input 元素。
input:read-write 选择未规定 "readonly" 属性的 input 元素。
input:required 选择已规定 "required" 属性的 input 元素。
:root 选择文档的根元素。
::selection 选择用户已选取的元素部分。
#news:target 选择当前活动的 #news 元素。
input:valid 选择带有有效值的所有 input 元素。
a:visited 选择所有已访问的链接。

0|1四、CSS属性


文字属性

属性名 取值 描述
font-size 数值 设置字体大小
font-family 默认,宋体,楷体等 设置字体样式
font-style normal正常;italic斜体; 设置斜体样式
font-weight 100-900数值;bold;bolder; 粗体样式
font 在一个声明中设置所有字体属性 font:italic bold 36px "宋体";

img

img

img

img

img

img

文本属性

属性名 取值 描述
color 十六进制;表示颜色的英文单词; 设置文本颜色
text-decoration none;underline;overline;blink; 文本的装饰线
text-align left;right;center; 文本水平对齐方式
word-spacing normal;固定值; 单词之间的间隔
line-height normal;固定值; 设置文本的行高
text-shadow 四个取值依次是: 水平偏移;垂直偏移;模糊值;阴影颜色; 设置阴影及模糊效果
text-indent 5px缩进5像素;20%缩进父容器宽度的百分之二十; 缩进元素中文本的首行

img

img

img

img

背景属性

属性名 取值 描述
背景色 16进制;用于表示颜色的英语单词; 设置背景色
背景图像 url("图片路径") 设置背景图片
背景重复 重复-y;重复-x;重复;不重复; 设置背景图的平铺方向
背景位置 上下;左;右;中; 改变图像在背景中的位置

imgimg

img

img

渐变属性

线性渐变

颜色沿着一条直线过渡:从左到右、从右到左、从上到下等

径向渐变

圆形或椭圆形渐变,颜色不再沿着一条直线变化,而是从一个起点朝所有方向混合

IE浏览器是Trident内核,加前缀:-ms- Chrome浏览器是Webkit内核,加前缀:-webkit- Safari浏览器是Webkit内核,加前缀:-webkit- Opera浏览器是Blink内核,加前缀:-o- Firefox浏览器是Mozilla内核,加前缀:-moz-

img

列表属性

属性名 取值 描述
list-style-type disc,none等 改变列表的标识类型
list-style-image url(“图片地址”) 用图像表示标识
list-style-position inside;outside 标识出现在列表项内容之外还是内部

尺寸属性

width:设置元素的宽度

height:设置元素的高度

显示属性

显示属性display,以下是常用取值: none:不显示 block:块级显示 inline:行级显示 #div{ display:block; /*块状元素*/ } #div{ display:inline; /*内联元素*/ } #div{ display:block; /*内联块状元素*/ } #div{ display:none; /*元素隐藏*/ }

img

块级元素与行级元素的转变(block,inline 控制块元素排到一行(inline-block) 控制元素的显示和隐藏(none)

轮廓属性

绘制于元素周围的一条线,位于边框边缘的外围,可起到突出元素的作用。常用属性:

属性名 取值 描述
outline-style solid(实线)/dotted(虚线)/dashed(虚线)等 设置轮廓的样式
outline-color 16进制;用于表示颜色的英文 设置轮廓的颜色
outline-width 数值 设置轮廓的宽度

浮动属性float

.layer01{ float:left; } .layer01{ float:right; }

浮动的框可以向左或向右移动,直到它的外边缘碰到包含框或另一个浮动框的边框为止。由于浮动框不在文档的普通流中,所以文档的普通流中的块框表现得就像浮动框不存在一样。

当把框1向右浮动时,它脱离文档流并且向右移动,直到它的右边缘碰到包含框的右边缘。

img

当框1向左浮动时,它脱离文档流并且向左移动,直到它的左边缘碰到包含框的左边缘。因为它不再处于文档流中,所以它不占据空间,实际上覆盖住了框2、使框2从视图中消失。

如果把所有三个框都向左移动,那么框1向左浮动直到碰到包含框,另外两个框向左浮动直到碰到前一个浮动框。

img

如果包含框太窄,无法容纳水平排列的三个浮动元素,那么其它浮动块向下移动,直到有足够的空间。如果浮动元素的高度不同,那么当它们向下移动时可能被其它浮动元素“卡住”。

img

clear属性:规定元素的哪一侧不允许其他浮动元素。它的取值如下:

取值 描述
left 在左侧不允许浮动元素。
right 在右侧不允许浮动元素。
both 在左右两侧均不允许浮动元素。
none 默认值。允许浮动元素出现在两侧 。
onherit 规定应该从父元素继承clear属性的值。
.lay04{ clear:left; } .lay04{ clear:right; } .lay04{ clear:both; }

inline-block和float的区别

display:inline-block 可以让元素排在一行,并且支持宽度和高度,代码实现起来方便 位置方向不可控制,会解析空格 IE 6IE 7上不支持 float 可以让元素排在一行并且支持宽度和高度,可以决定排列方向 float 浮动以后元素脱离文档流,会对周围元素产生影响,必须在它的父级上添加清除浮动的样式

父元素塌陷

如何解决当前div中的所有小div全部浮动 此时大div会变成一个线,不好看,此时解决方案有四种: 1.div设置宽度和高度 2.加一个空的div给这个div设置清除左右浮动,内外边距都为0 3.给父div设置overflowhidden 4.<div class="clear"> </div> .clear:after{ content:'';/*在clear类后面添加内容为空*/ display:block;/*把添加的内容转化为块元素*/ clear:both;/*清除这个元素两边的浮动*/ }

img

overflow属性

img

定位属性

position属性

div.static{ position:static:/*默认定位;清除定位*/ } div.static{ position:relative:/*相对定位*/ top:30px; left:40px; } div.static{ position:absolute:/*绝对定位*/ top:30px; left:40px; } div.static{ position:fixed:/*固定定位*/ top:30px; left:40px; } /*父相子绝*/

img

相对定位:元素框便宜某个距离,元素仍保持其未定为前的形状,他原本所占位置的空间仍保留。

<head> <style type="text/css"> h2.pos_left{ position:relative; left:-20px } h2.pos_right{ position:relative; left:20px } </style> </head> <body> <h2>这是位于正常位置的标题</h2> <h2 class="pos_left">这个标题相对于其正常位置向左移动</h2> <h2 class="pos_right">这个标题相对于其正常位置向右移动</h2> <p>相对于定位会按照元素的原始位置对该元素进行移动</p> <p> 样式"left:-20px" 从元素的原始左侧位置减去20像素。</p> <p>样式"left:20px" 从元素的原始左侧位置增加20像素。</p> </body>

绝对定位(absolute):元素框从文档流完全删除,并相对于其包含块进行定位。包含块可能是文档中的另一个元素或者是初始包含块。

元素原先在正常文档流中所占的空间会关闭,就好像元素原来不存在一样。元素定位后生成一个块级框。

<html> <head> <meta charset="utf-8"/> <style type="text/css"> h2.pos_abs{ position:absolute; left=100px; top:150px; } </style> </head> <body> <h2 class="pos_abs">这是带有绝对定位的标题</h2> <p>通过绝对定位,元素可以放置到页面上的任何位置。下面的标题距离页面左侧100px,距离页面顶部150px。</p> </body> </html>

固定定位(fixed):元素框的表现类似于将 position 设置为absolute,不过其包含块是视窗本身。

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style> #left{ width:200px; height:200px; background-color:red; position:fixed; left:0px; bottom:0px; } #right{ width:200px; height:200px; background-color:green; position:fixed; right:0px; bottom:0px; } #middle{ width:200px; height:200px; background-color:blue; position:fixed; left:0px; bottom:50%; } </style> </head> <body> <div id="left">左下</div> <div id="right">右下</div> <div id="middle">中间</div> </body> </html>

z-index属性

调整元素定位时重叠层的上下位置 z-index属性值:整数,默认值为0 设置了positon属性时,z-index属性可以设置各元素之间的重叠高低关系 z-index值大的层位于其值小的层上方 网页中的元素都含有两个堆叠层级 未设置绝对定位时所处的环境,z-index0 设置绝对定位时所处的堆叠环境,此时层的位置由z-index的值确定 改变设置绝对定位和没有设置绝对定位的层的上下堆叠顺序,只需调整绝对定位层的z-index值即可

网页元素透明度

属性 说明 举例
opacity:x x值为0~1,值越小越透明 opacity:0.4;
filter:alpha(opavity=x) x值为0~100,值越小越透明 filter:alpha(opacity:40);

0|1五、盒子模型


image-20230424095609002

image-20230424154054374

边框相关属性

属性名 取值 描述
border-style solid;double;dashed;dotted等 设置边框的样式
border-color 16进制;用于表示颜色的英文; 设置边框的颜色
border-width 数值 设置边框的粗细

外边距相关属性

margin:外间距,边框和边框外层的元素的距离

属性 取值 描述
margin top;right;bottom;left 四个方向的距离
margin-top 数值 上间距
margin-bottom 数值 下间距
margin-left 数值 左间距
marfin-right 数值 右间距

image-20230424154140765

image-20230424154232548

image-20230424154242062

image-20230424154259382

image-20230424154309849

内边距相关属性

padding:内间距,元素内容和边框之间的距离((top right bottom left))

网页居中

margin:0px auto;

网页居中对齐的必要条件:

块元素 、固定宽度

属性值 描述
padding-left
padding-right
padding-top
padding-bottom

image-20230424154322038

尺寸

image-20230424154351838

image-20230424154405136

0|1六、CSS3扩展属性


border-radius创建圆角

示例:border-radius:25px;

image-20230424100416659

image-20230424154439026

image-20230424154453997

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <link rel="stylesheet" type="text/css" href="css/test042401.css"/> </head> <body> <div id="d1"></div> <div id="d2"></div> <div id="d3"></div> <div id="d4"></div> <div id="d5"></div> </body> </html>
#d1{ border: 1px solid mediumpurple; background-color: mediumpurple; width: 20px; height: 40px; border-radius: 0px 20px 20px 0px; margin-bottom: 10px; } #d2{ border: 1px solid mediumpurple; background-color: mediumpurple; width: 20px; height: 20px; border-radius: 20px 0px 0px 0px; margin-bottom: 10px; } #d3{ border: 1px solid mediumpurple; background-color: mediumpurple; width: 20px; height: 20px; border-radius: 0px 20px 0px 0px; margin-bottom: 10px; } #d4{ border: 1px solid mediumpurple; background-color: mediumpurple; width: 20px; height: 20px; border-radius: 0px 0px 20px 0px; margin-bottom: 10px; } #d5{ border: 1px solid mediumpurple; background-color: mediumpurple; width: 20px; height: 20px; border-radius: 0px 0px 0px 20px; }

image-20230424161205341

box-shadow:用于向方框添加阴影

示例:box-shadow:10px 10px 5px #888888;

image-20230424100515112

image-20230424161821455

background-size: 属性规定背景图片的尺寸

<body style="text-aligin:center; background:url(img/1.png); background-size:200px 300px; background-repeat:no-repeat;"> </body>

text-shadow:可向文本应用阴影

示例:text-shadow:5px 5px 5px #ffff00;


__EOF__

作  者YXH
出  处https://www.cnblogs.com/YxinHaaa/p/17366588.html
关于博主:编程路上的小学生,热爱技术,喜欢专研。评论和私信会在第一时间回复。或者直接私信我。
版权声明:署名 - 非商业性使用 - 禁止演绎,协议普通文本 | 协议法律文本
声援博主:如果您觉得文章对您有帮助,可以点击文章右下角推荐一下。您的鼓励是博主的最大动力!

posted @   YxinHaaa  阅读(5)  评论(0编辑  收藏  举报
相关博文:
阅读排行:
· 全程不用写代码,我用AI程序员写了一个飞机大战
· MongoDB 8.0这个新功能碉堡了,比商业数据库还牛
· 记一次.NET内存居高不下排查解决与启示
· DeepSeek 开源周回顾「GitHub 热点速览」
· 白话解读 Dapr 1.15:你的「微服务管家」又秀新绝活了
0
0
关注
跳至底部
点击右上角即可分享
微信分享提示