关闭页面特效

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文档一起使用时，class与id名称对大小写敏感

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 6、IE 7上不支持
float 
    可以让元素排在一行并且支持宽度和高度，可以决定排列方向
    float 浮动以后元素脱离文档流，会对周围元素产生影响，必须在它的父级上添加清除浮动的样式

父元素塌陷

如何解决当前div中的所有小div全部浮动 此时大div会变成一个线，不好看，此时解决方案有四种：
1.给div设置宽度和高度
2.加一个空的div给这个div设置清除左右浮动，内外边距都为0
3.给父div设置overflow：hidden
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-index是0
设置绝对定位时所处的堆叠环境，此时层的位置由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)  编辑  收藏  举报
相关博文：
· JQuery
· HTML5+CSS3
· 【CSS】CSS笔记
· web前端之css
· Web前端新手入门系列：2、CSS
阅读排行：
· 全程不用写代码，我用AI程序员写了一个飞机大战
· MongoDB 8.0这个新功能碉堡了，比商业数据库还牛
· 记一次.NET内存居高不下排查解决与启示
· DeepSeek 开源周回顾「GitHub 热点速览」
· 白话解读 Dapr 1.15：你的「微服务管家」又秀新绝活了
0
0
关注
跳至底部
点击右上角即可分享
微信分享提示