CSS3

最新推荐文章于 2023-09-21 14:19:19 发布

FFeng007

最新推荐文章于 2023-09-21 14:19:19 发布

阅读量140

点赞数 1

分类专栏：前端文章标签： css3 前端

本文链接：https://blog.csdn.net/q2389419762/article/details/119735973

版权

前端专栏收录该内容

2 篇文章 0 订阅

订阅专栏

一、初始CSS

1.CSS

Cascading Style Sheet 层叠样式表。
表现HTML或XHTML文件样式的计算机语言。
优势：
- 内容与表现分离，网页的表现统一，容易修改。
- 丰富的样式，使得页面布局更加灵活。
- 运用独立于页面的CSS，有利于网页被搜索引擎收录。
- 减少网页的代码量，增加网页的浏览速度，节省网络带宽。

2.CSS基本语法

语法：

选择器{
    声明1；
    声明2；
}

style标签：CSS样式在HTML中应用的标签。

3.引入CSS方式

行内样式：在标签元素中，编写一个style属性，编写样式即可，由于这种方式不能起到内容与表现相分离，因此不推荐使用。

<h1 style="color: blue">我是标题</h1>

内部样式：方便在同页面中修改样式，不利于在多页面间共享复用代码及维护。

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

外部样式：CSS代码保存在扩展名为.css的样式表中，HTML文件引用扩展名为.css的样式表，有俩种方式。
- 链接式：使用 link 标签链接外部样式表，link 标签必须放在 head 标签中。
- 客户端浏览网页时先将外部CSS文件加载到网页当中，然后再进行编译显示，所以这种情况下显示出来的网页与用户预期的效果一样。
```
<link rel="stylesheet" href="css/style.css">
```
- 导入式：使用@import导入外部样式表。
- 客户端在浏览网页时先将HTML结构呈现出来，再把外部CSS文件加载到网页当中，当网速较慢时会先显示没有CSS统一布局的HTML网页。
```
<style>@import url("css/style.css");</style>
```
优先级：就近原则，越接近标签的样式优先级越高。

4.CSS基本选择器

标签选择器：HTML标签作为选择器的名称。
类选择器：.class的名称{}，好处：可以多个标签归类，是同一个class，可以复用。
ID选择器：#id名称{} ： id必须保证全局唯一!
优先级：id 选择器>class 选择器>标签选择器

5.CSS高级选择器

1.层次选择器

后代选择器：某个元素的后面。
子选择器：一代，儿子。
相邻兄弟选择器：只有一个，相邻（向下）。
统通用兄弟选择器：当前选中元素向下的所有兄弟元素。

/*1.后代选择器：某个元素的后面*/
body p{
    background: #158616;
}

/*2.子选择器：一代，儿子*/
body>p{
    background: #158616;
}

/*3.相邻兄弟选择器：只有一个，相邻（向下）*/
.active + p{
    background: #158616;
}

/*4.通用兄弟选择器：当前选中元素向下的所有兄弟元素*/
.active~p{
    background: #158616;
}

2.结构伪类选择器

/*ul的第一个子元素*/
ul li:first-child{
    background: red;
}

/*ul的最后一个子元素*/
ul li:last-child{
    background: green;
}

/*选中p1：定位到父元素，选择当前的第二个元素
选择当前p元素的父级元素，选择父级元素的第二个元素，并且是当前元素才生效，按顺序
*/
p:nth-child(2){
    background: blue;
}

/*选中父级元素，下的p元素的第二个，按类型*/
p:nth-of-type(2){
    background: pink;
}

3.属性选择器

= 绝对等于
*= 包含
^= 以什么开头
$= 以什么结尾

/*属性名，属性名 = 属性值（正值）
= 绝对等于
*= 包含
^= 以什么开头
$= 以什么结尾
*/

/*存在id属性元素      a[]{}*/
a[id]{
    background: yellow;
}

/*id=first的元素*/
a[id=first]{
    background: yellow;
}

/*class 中有links的元素*/
a[class*="links"]{
    background: yellow;
}

/*选中herf中以http开头的*/
a[href^=http]{
    background: yellow;
}

/*选中herf中以jpg结尾的*/
a[href$=com]{
    background: green;
}

二、美化网页元素

1.为什么使用CSS

有效的传递页面信息。
使用CSS美化过的页面文本，使页面漂亮、美观，吸引用户。
可以很好的突出页面的主题内容，使用户第一眼可以看到页面主要内容。
具有良好的用户体验。
< span>标签：能让某几个文字或者某个词语凸显出来，从而添加对应的样式！

<!--重点突出的字，用span套起来-->
做一名 <span id="title1">JAVA</span>工程师

2.字体样式

font-family：字体类型
font-size：字体大小，单位：px、em。
font-weight：字体粗细，lighter、normal（400）、bold（700）、bolder。
color：字体颜色
font-style：字体风格，normal、italic和oblique（斜体）。

<style>
    body{
        font-family: "Arial",楷体;
        color: #865722;
    }
    h1{
        font-size:50px;
    }
    .p1{
        font-weight: bolder;
    }
</style>

字体属性 font：字体属性的顺序：字体风格→字体粗细→字体大小→字体类型

<style>
    .p1{
        font: oblique 100 16px "楷体" ;
    }
</style>

3.文本样式

text-align: center; 排版：居中。
text-indent: 2em; 段落首行缩进二字符。
text-decoration: none; 去掉下划线，上中下划线，删除线。
height: 300px;
line-height: 300px;
行高和块的高度一致，就可以上下居中。
vertical-align: middle; 文本图片水平对齐，参照物: a，b。

<!--
颜色：
    单词
    RGB 0~F
    RGBA A 0~1 透明度
-->
<style>
    h1{
        color: rgba(0,255,255,0.5);
        text-align: center;
    }
    .p1{
        text-indent: 2em;
    }
    .p3{
        background: blue;
        height: 300px;
        line-height: 300px;
    }

    /*下划线*/
    .l1{
        text-decoration: underline;
    }
    /*中划线*/
    .l2{
        text-decoration: line-through;
    }
    /*上划线*/
    .l3{
        text-decoration: overline;
    }
    /*超链接去掉下划线*/
    a{
        text-decoration: none;
    }
    /*文本图片水平对齐，参照物， a，b*/
     img,span{
         vertical-align: middle;
     }
</style>

4.文本阴影

text-shadow：文本阴影（水平偏移，垂直偏移，阴影模糊半径，阴影颜色）

#price{text-shadow: 5px 2px 2px #0af8ff;}

5.超链接伪类

a:hover{} 鼠标悬浮的状态

/*默认颜色*/
a{
    text-decoration: none;
    color: #000000;
}
/*鼠标悬浮的状态（只需要记住：hover）*/
a:hover{
    color: orange;
    font-size: 20px;
}
/*鼠标按住未释放的状态*/
a:active{
    color: #e01500;
}

6.列表样式

list-style:
none：去掉圆点
disc：实心圆，默认类型
circlr：空心圆
decimal：数字
square：正方形

7.背景样式

background-image：背景图像
background-color：背景颜色
background-repeat：背景重复方式（沿x轴平铺，沿y轴平铺，不重复）

div{
    height: 700px;
    width: 1000px;
    border: 1px solid red;
    background-image: url("images/cs11dn.png");
    /*默认是全部平铺的 repeat*/
}
/*沿x轴平铺*/
.div1{
    background-repeat: repeat-x;
}
/*沿y轴平铺*/
.div2{
    background-repeat: repeat-y;
}
/*不重复 就一个*/
.div3{
    background-repeat: no-repeat;
}

背景简写

/*颜色 图片 图片定位 背景不重复*/
background: red url("../images/d.png") 270px 10px no-repeat;

8.渐变样式

网站推荐：http://color.oulu.me/

/*background-color: #00bcbf;*/
background-image: linear-gradient(117deg, #00bcbf 0%, #FC00FF 100%);

三、盒子模型

1.盒子模型

Margin(外边距) - 清除边框外的区域，外边距是透明的。
Border(边框) - 围绕在内边距和内容外的边框。
Padding(内边距) - 清除内容周围的区域，内边距是透明的。
Content(内容) - 盒子的内容，显示文本和图像。

2.边框border

同时设置4个边框颜色时，顺序为上右下左（顺时针）。

/*body总有一个默认的外边距 要进行默认设置margin：0（常见操作）
body{
    margin: 0;
    padding: 0;
    text-decoration: none;
}*/

/*border：粗细，样式，颜色
    solid 实线
    dashed 虚线
*/
#box{
    width: 240px;
    border: 1px solid red;
}

3.内外边距 padding margin

同时设置2个值时，顺序为上下、右左。
同时设置4个值时，顺序为上右下左（顺时针）。
内外边距同理。

/*
顺时针旋转
margin: 0
margin: 0 1px
margin: 0 1px 2px 3px
*/
h2{
    background: #0af8ff;
    font-size: 18px;
    color: white;
    line-height: 30px;
    text-align: center;
    margin: 0 1px 2px 3px;
}

外边距的妙用，居中元素：margin: 0 auto;
网页居中对齐的必要条件：块元素，固定宽度。

#box{
        width: 240px;
        border: 1px solid red;
        margin: 0 auto;
    }

4.盒子模型尺寸

盒子模型总尺寸= border + padding + margin + 内容高度

5.圆角边框

border-radius：边框半径，左上，右上，右下，左下，顺时针方向。
圆圈：圆角=半径（border-radius: 50%;）

div{
    height: 100px;
    width: 100px;
    border: 2px solid red;
    border-radius: 20px 10px 30px 40px;
}

6.盒子阴影

box-shadow：内阴影（阴影类型）、x轴位移、y轴位移、阴影模糊半径、阴影颜色。

box-shadow:inset 10px 10px 20px yellow;

四、浮动

1.标准文档流

标准文档流：指元素根据块元素或行内元素的特性按从上到下，从左到右的方式自然排列。这也是元素默认的排列方式。
块级元素（block）：< h1>…< h6>、< p>、< div>、列表
内联元素（inline）：< span>、< a>、< img>
内联标签可以包含于块级标签中，成为它的子元素，而反过来则不成立。

2.display

bolck：元素显示为块级元素。
inline：元素显示为内联元素。
inline-block: 行内块元素，是块元素，还可以内联，在一行！（可以使块元素排在一行）
none：设置元素不会被显示。

3.浮动 float

left：左浮动，right：右浮动。（可以使块元素排在一行，会产生边框塌陷）
clear：清除浮动。

div { clear:both; 清除两侧浮动 } div{ clear:left; 清除左侧浮动 } div { clear:right; 清除右侧浮动 }

4.边框塌陷及解决方法

设置父元素的高度
- 简单，元素假定有了固定高度，就会被限制，降低扩展性。

#father{
    height: 250px;
    /*简单，元素假定有了固定高度，就会被限制*/
}
.div1{
    float: left;
}
.div2{
    float: left;
}
.div3{
    float: right;
}
.div4{
    float: right;
}

<div id="father" style="border: 1px black solid">
    <div class="div1" style="width: 100px;height: 100px;border: 1px dashed red">我是div1</div>
    <div class="div2" style="width: 100px;height: 100px;border: 1px dashed red">我是div2</div>
    <div class="div3" style="width: 100px;height: 100px;border: 1px dashed red">我是div3</div>
    <div class="div4" style="width: 100px;height: 100px;border: 1px dashed red">我是div4</div>
</div>

父级添加overflow属性（溢出处理）
- 简单，下拉列表框的场景不能使用。

/*简单，下拉列表框的场景不能使用*/
#father{
    overflow: hidden;
}
.div1{
    float: left;
}
.div2{
    float: left;
}
.div3{
    float: right;
}
.div4{
    float: right;
}

<div id="father" style="border: 1px black solid">
    <div class="div1" style="width: 100px;height: 100px;border: 1px dashed red">我是div1</div>
    <div class="div2" style="width: 100px;height: 100px;border: 1px dashed red">我是div2</div>
    <div class="div3" style="width: 100px;height: 100px;border: 1px dashed red">我是div3</div>
    <div class="div4" style="width: 100px;height: 100px;border: 1px dashed red">我是div4</div>
</div>

浮动元素后面加空div
- 简单，但是空div会造成HTML代码冗余，代码中尽量避免加空div。

#father{

}
.div1{
    float: left;
}
.div2{
    float: left;
}
.div3{
    float: right;
}
.div4{
    float: right;
}
/*简单，代码中尽量避免加空div*/
#clear{
    margin: 0;
    padding: 0;
    clear: both;
}

<div id="father" style="border: 1px black solid">
    <div class="div1" style="width: 100px;height: 100px;border: 1px dashed red">我是div1</div>
    <div class="div2" style="width: 100px;height: 100px;border: 1px dashed red">我是div2</div>
    <div class="div3" style="width: 100px;height: 100px;border: 1px dashed red">我是div3</div>
    <div class="div4" style="width: 100px;height: 100px;border: 1px dashed red">我是div4</div>
    <div id="clear"></div>
</div>

父级添加伪类after（推荐）
- 写法比前三个复杂，但是没有副作用，推荐使用。

#father{
}
/*写法复杂，但是没有副作用，推荐使用*/
#father:after{
    content:"";
    display: block;
    clear: both;
}
.div1{
    float: left;
}
.div2{
    float: left;
}
.div3{
    float: right;
}
.div4{
    float: right;
}

<div id="father" style="border: 1px black solid">
    <div class="div1" style="width: 100px;height: 100px;border: 1px dashed red">我是div1</div>
    <div class="div2" style="width: 100px;height: 100px;border: 1px dashed red">我是div2</div>
    <div class="div3" style="width: 100px;height: 100px;border: 1px dashed red">我是div3</div>
    <div class="div4" style="width: 100px;height: 100px;border: 1px dashed red">我是div4</div>
</div>

5.inline-block 和 float 区别

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

五、定位

1.定位在网页中的应用

下拉菜单，不随滚动条移动的固定导航，鼠标移入弹出的消息框。

2.相对定位 relative

position: relative：相对定位，相对于自身原来的位置进行偏移。
偏移设置：top、left、right、bottom，上左右下。
设置相对定位的盒子仍在标准文档流中，它对父级盒子和相邻的盒子都没有任何影响。
层级提高，可以把标准文档流中的元素及浮动元素盖在下边

#first{
    background-color: #0af8ff;
    border: 1px dashed #d83a17;
    position: relative;/*相对定位：上下左右*/
    top: -20px;
}
#second{
    background-color: #ebff11;
    border: 1px dashed #e09344;
    position: relative;
    left: 20px;

3.绝对定位 absolute

position: relative：绝对定位，相对于它的定位父级的位置来定位，如果没有设置定位父级，则相对浏览器窗口来定位。
元素位置发生偏移后，原来的位置不会被保留下来。
绝对定位的元素从标准文档流中脱离，这意味着它们对其他元素的定位不会造成影响。
层级提高，可以把标准文档流中的元素及浮动元素盖在下边。

#father{
    border: 1px solid black;
    padding: 0;
    position: relative;
}
#second{
    background-color: #ebff11;
    border: 1px dashed #e09344;
    position: absolute;
    left: -20px
}

4.固定定位 fixed

position: fixed：固定定位，相对浏览器窗口来定位，偏移量不会随滚动条的移动而移动。

div:nth-of-type(2){/*fixed，固定定位*/
    width: 50px;
    height: 50px;
    background-color: green;
    position: fixed;
    bottom: 0;
    right: 0;
}

5.z-index属性

z-index：调整元素定位时重叠层的上下位置，值大的层位于值小的层上方。默认层数是0。
opacity: x：设置透明度，x值为0~1，值越小越透明。

.tipText{
    /*z-index: 1;*/
}
.tipBg{
    background-color: black;
    opacity: 0.5;/*背景透明度*/
    /*filter: alpha(opacity=50);*//*老版本*/
}

六、制作网页动画

1.CSS变形

translate()：平移函数，基于X、Y坐标重新定位元素的位置。
scale()：缩放函数，可以使任意元素对象尺寸发生变化。
rotate()：旋转函数，取值是一个度数值。
skew()：倾斜函数，取值是一个度数值。

2.CSS过渡

transition [ transition-property transition-duration transition-timing-function transition-delay ]

过渡属性（ transition-property ）：定义转换动画的CSS属性名称（width、height、background-color属性等）。
过渡所需的时间（ transition-duration ）：定义转换动画的时间长度，单位为秒。
过渡动画函数（ transition-timing-function ）：通过给过渡添加一个函数来指定动画的快慢方式。
- ease：速度由快到慢（默认值）
- linear：速度恒速（匀速运动）
- ease-in：速度越来越快（渐显效果）
- ease-out：速度越来越慢（渐隐效果）
- ease-in-out：速度先加速再减速（渐显渐隐效果）
过渡延迟时间（ transition-delay ）：指定一个动画开始执行的时间。

触发机制：伪类触发、媒体查询、JavaScript触发。

3.CSS动画

设置关键帧

@keyframes myfirst {    from {background: red;}    to {background: yellow;} }

@keyframes的浏览器兼容性
- 写兼容的时候浏览器前缀是放在@keyframes中间例如：@-webkit-keyframes、@-moz- keyframes
animation属性
- animation-play-state：动画的播放状态，规定动画是否正在运行或暂停。默认是 running。
- animation-iteration-count：动画的播放次数，默认为1，特殊值 infinite，表示动画无限次播放。
- animation-direction：动画的播放方向，规定是否应该轮流反向播放动画。
- animation-fill-mode：动画发生的操作，规定当动画不播放时（当动画完成时，或当动画有一个延迟未开始播放时），要应用到元素的样式。

FFeng007

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
CSS3

文章目录一、初始CSS1.CSS2.CSS基本语法3.引入CSS方式4.CSS基本选择器5.CSS高级选择器1.层次选择器2.结构伪类选择器3.属性选择器二、美化网页元素1.为什么使用CSS2.字体样式3.文本样式4.文本阴影5.超链接伪类6.列表样式7.背景样式8.渐变样式三、盒子模型1.盒子模型2.边框border3.内外边距 padding margin4.盒子模型尺寸5.圆角边框6.盒子阴影四、浮动1.标准文档流2.display3.浮动 float4.边框塌陷及解决方法5.inline-block
复制链接

扫一扫