CSS3浅入要点整理（1）

最新推荐文章于 2023-03-04 16:54:48 发布
最新推荐文章于 2023-03-04 16:54:48 发布
阅读量1.2k 收藏
点赞数
文章标签： css3
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_64192768/article/details/123664146
版权
1、什么是CSS3层叠样式表

Cascading Style Sheet层叠样式表，可以通过多个样式去表现。

2、div属于块级元素，占一整行。
3、span属于行内元素，出现新的span并不会换行。
<div>元素</div>
<div>元素</div>
<span>元素</span>
<span>元素</span>

样式如上

4、CSS的基本语法结构
 <style>
        选择器{
            声明1；
            声明2；
            声明3；
        }
    </style>
5、三种引入CSS的方式

（1）行内样式:直接在标签中编写声明。

<p style="font-size:20px">Css3</P>

（2）内部样式表：在同一个HTML页面中，使用style属性引入CSS样式。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>class</title>

<!-- <link href="style.cass" rel="stylesheet" type="text/css"/> -->
<style type="text/css"><!--type="text/css"可不写，如果写一定要写对-->
    h2{
        font-size:25px;
        color:black;
    }
    .redColor{
        color:red
}
</style>
<!-- @import url("style.css"); -->
</head>
<body>
    <h2>望庐山瀑布</h2>
    <p style="font-size:16px;color:green;">
    日照香炉生紫烟，<br/>

    遥看瀑布挂前川。<br/>

    飞流直下三千尺，<br/>

    疑是银河落九天。<br/>
    </p>
</body>
</html>

效果样式如上

优点：方便在同页面中修改样式
缺点：不利于在多页面间共享复用代码及维护，对内容与样式的分离也不够彻底

（3)外部样式表

​ 1）链接外部样式表，不需要放入style属性内

<head>
<link href="style.cass" rel="stylesheet" type="text/css"/>
</head>

href引入路径，rel="stylesheet"和type="text/css"内容不变

​ 2）导入外部样式表

<head>
<style type="text/css">
    @import url("style.css");
</style>
</head>

链接式与导入式的区别：

标签属于XHTML，@import是属于CSS2.1 使用链接的CSS文件先加载到网页当中，再进行编译显示 使用@import导入的CSS文件，客户端显示HTML结构，再把CSS文件加载到网页当中 @import是属于CSS2.1特有的，对不兼容CSS2.1的浏览器是无效的
6、css引入顺序比较

当样式冲突时：行内样式>内部样式表>外部样式表

7、css选择器
7.1基本css选择器有三种：标签选择器、类选择器、ID选择器

1）标签选择器

如

…

、

、

<style>
    h2{
        font-size:25px;
        color:black;
    }
   
</style>

2）类选择器

<head>
<style>
    .redColor{
        color:red
}
</style>
</head>
<body>
    <span class="redColor">遥看瀑布挂前川</span>。<br/>
</body>

格式如下：

<标签名 class= “类名称”>标签内容</标签名>

.类名称 { font-size:16px;}

3）ID选择器

<head>
<style>
    #redColor{
        color:red
}
</style>
</head>
<body>
    <span id="redColor">遥看瀑布挂前川</span>。<br/>
</body>

格式如下：

#id名称 { font-size:16px;}

4)选择器顺序比较

​ ID选择器>类选择器>标签选择器

<style>
    h2{
        font-size:25px;
        color:black;
    }
    .redColor{
        color:red;
    }
    #blue{
            color:blue;
        }

</style>

<!-- @import url("style.css"); -->

</head>
<body>
    <h2>望庐山瀑布</h2>
    <p style="font-size:16px;color:green;">
    <span class="redColor">日照香炉生紫烟，</span><br/>

    <span class="redColor" id="blue">遥看瀑布挂前川。</span><br/>

    飞流直下三千尺，<br/>

    疑是银河落九天。<br/>
    </p>

</body>
</html>

7.2层次选择器

1）后代选择器：选择匹配的F元素，且匹配的F元素被包含在匹配的E元素内（E F）

  <style>
        body h1{
            color:brown;
        }
    </style>
</head>
<body>
    <h1>11111</h1>
    
    <div>
        <h1>22222</h1>>
    </div>
    
   
</body>
</html>

只需要被包裹，无论中间是否有其他标签。

2）子选择器：选择匹配的F元素，且匹配的F元素是匹配的E元素的子元素（E>F）

    <style>
        body>h1{
            color:brown;
        }
    </style>


</head>
<body>
    <h1>11111</h1>
    <h2>11111</h2>
    <h1>11111</h1>
    <div>
        <h1>22222</h1>
    </div>
      <h1>11111</h1>
   
</body>
</html>

必须是子元素，中间不可以包括其他元素。

3）相邻兄弟选择器：选择匹配的F元素，且匹配的F元素紧位于匹配的E元素后面（E+F）

   <style>
        .cc+h1{
            color:brown;
        }
    </style>


</head>
<body>
    <h1 class="cc">11111</h1>
    <div>
        <h1 class="cc">11111</h1>
        <h1 class="cc">11111</h1>
        <h1>11111</h1>
        <h1 class="cc">11111</h1>
        <h1>11111</h1>

    </div>
    <div>
        <h1>22222</h1>
    </div>
      <h1>11111</h1>
   
</body>
</html>

首先EF是同一个类型，同一个基本选择器。同时两个位置紧贴一起，且前一个必须满足+号之前的“xx”条件。

4）通用兄弟选择器：选择匹配的F元素，且位于匹配的E元素后的所有匹配的F元素（E~F）

<style>
        .cc~h1{
            color:brown;
        }
    </style>


</head>
<body>
    <h1 class="cc">11111</h1>
    <div>
        <h1 class="cc">11111</h1>
        <h1 class="cc">11111</h1>
        <h1>11111</h1>
        <h1 class="cc">11111</h1>
        <h1>11111</h1>

    </div>
    <div>
        <h1>22222</h1>
    </div>
      <h1>11111</h1>

同一层级下，只要第一个满足E~F条件，其下面的所有都满足。

7.3结构伪类选择器

1）E:first-child：作为父元素的第一个子元素的元素E

所有层级的第一个元素是否符合条件。

2）E:last-child：作为父元素的最后一个子元素的元素E

标签中最后一个元素不会被选中。

3）E F:nth-child(n)：选择父级元素E的第n个子元素F，（n可以是1、2、3），关键字为even、odd

4）E:first-of-type：选择父元素内具有指定类型的第一个E元素

 <style>
        h1:first-of-type{
            color:brown;
        }
    </style>


</head>
<body>
    <h1>11111</h1>
    <div>
        <h1>11111</h1>
        <h1>11111</h1>
        <h1>11111</h1>
    </div>
    <div>
        <h2>22222</h2>
        <h1>22222</h1>
        <h1>22222</h1>
    </div>
    <h1>11111</h1>
</body>

5）E:last-of-type：选择父元素内具有指定类型的最后一个E元素

6）E F:nth-of-type(n)：选择父元素内具有指定类型的第n个F元素

使用E F:nth-child(n)和E F:nth-of-type(n)的 关键点
E F:nth-child(n)在父级里从一个元素开始查找，不分类型
E F:nth-of-type(n)在父级里先看类型，再看位置

7.4属性选择器

E[attr]：选择匹配具有属性attr的E元素

E[attr=val]：选择匹配具有属性attr的E元素,并且属性值为val（其中val区分大小写）

E[attr^=val]：选择匹配元素E，且E元素定义了属性attr，其属性值是以val开头的任意字符串

E[attr$=val]：选择匹配元素E，且E元素定义了属性attr，其属性值是以val结尾的任意字符串

E[attr*=val]：选择匹配元素E，且E元素定义了属性attr，其属性值包含了“val”，换句话说，字符串val与属性值中的任意位置相匹配

   <style>
         h1[id]{
            color:rgb(33, 201, 223);
        
         }
        h1[name="cl"]{
            color:brown;
        }
        h1[name^="cc"]{
            color:rgb(54, 57, 218);
        }
        h1[name$="cor"]{
            color:rgb(23, 146, 29);
        }
        h1[name*="v"]{
            color:rgb(206, 20, 212);
        }

    </style>
</head>
<body>
    
    <div>
        <h1 id="l">11111</h1>
        <h1 name="cl">11111</h1>
        <h1 name="ccl">11111</h1>
        <h1  name="cor">11111</h1>
        <h1  name="vv">11111</h1>
    </div>
   
</body>

8、字体样式 ：都放入选择器中

1）font-family：设置字体类型

​ font-family：Verdana,“楷体”；可同时几个，先英文字体后中文。

与后面字体冲突时，以前面字体为准。

2）font-size：设置字体大小

​ 单位：px:像素；em:相对父节点的大小；rem:相对的大小；cm:厘米；mm:毫米；pt:1/72寸；pc:1/6寸；

​ font-size：2em;

3）font-style：设置字体风格

​ normal:普通；italic：斜体；oblique：倾斜；

​ font-style：normal；

4）font-weight：设置字体的粗细

​ 有100-900等级，normal:400默认大小；bold:700加粗；bolder：更 粗；lighter：更细；

​ font-weight:lighter;

5）font：在一个声明中设置所有字体属性

顺序为：文字风格,文字粗细，文字大小，文字字体

​ font：oblique bold 12px “楷体”

9、关于文本

1）color：设置文本颜色

三种写法：1.纯英文，red;

​ 2.RGB或RGBA（#FFF或者#FFFFFF），第一个分别对应红，绿，蓝的百分比，第二个使用两位数的十六进制表示。可多加一位表示透明度，0为最透明，F为最不透明。

3.color:rgb(0,255,255);color:rgba(0,0,255,0.5);

​ color:#EEFF66;
​ color:rgb(0,255,255);
color:rgba(0,0,255,0.5);

2）text-align：设置元素水平对齐方式

​ left:靠左，把文本排列到左边。默认值：由浏览器决定

​ right:靠右，把文本排列到右边

​ center:居中，把文本排列到中间

​ justify:两端对齐，实现两端对齐文本效果

​ text-align：left；

3）text-indent：设置首行文本的缩进

4）line-height：设置文本的行高

5）text-decoration：设置文本的装饰

​ none：默认值，定义的标准文本

​ underline：设置文本的下划线

​ overline：设置文本的上划线

​ line-through：设置文本的删除线

10、文本阴影和垂直对齐

文本阴影:text-shadow : color x-offset y-offset blur-radius;

垂直对齐方式
vertical-align属性：middle、top、bottom

11、超链接伪类

1）a:link未单击访问时超链接样式

​ a:link{color:#9ef5f9;}

2）a:visited单击访问后超链接样式

​ a:visited {color:#333;}

3）a:hover鼠标悬浮其上的超链接样式

​ a:hover{color:#ff7300;}

4）a:active鼠标单击未释放的超链接样式

​ a:active {color:#999;}

设置伪类的顺序：a:link->a:visited->a:hover->a:active

    <style>
        .a:link{
            color:#9ef5f9;
        }
        .b:visited{
            color:#333;
        }
        .c:hover{
            color:#ff7300;
        }
        .d:active{
            color:#999;
        }

    </style>
        。。。。。。
        
    <a  href="李清.html"  target="_blank" class="a">111111</a>
    <a  href="李清照.html"  target="_blank" class="b">22222</a>
    <a  href="李清照清.html"  target="_blank" class="c">3333333</a>
    <a  href="李清照清平.html"  target="_blank" class="d">4444444</a>

12、列表样式

12.1list-style-type

1）none无标记符号

​ li {
​ list-style:none;
​ }

​ 去除列表前面的小黑点

2）disc实心圆，默认类型

​ list-style-type:disc;

3）circle空心圆

​ list-style-type:circle;

4）square实心正方形

​ list-style-type:square;

5）decimal数字

​ list-style-type:decimal

13)网页背景

1）背景颜色
background-color
2）背景图像
background-image:url(“图片路径”);

3）背景重复方式
background-repeat属性
repeat：沿水平和垂直两个方向平铺
no-repeat：不平铺，即只显示一次
repeat-x：只沿水平方向平铺
repeat-y：只沿垂直方向平铺

4）背景定位
background-position属性

​ 1.Xpos Ypos。单位：px，Xpos表示水平位置，Ypos表示垂直位置

​ 2.X% Y%使用百分比表示背景的位置

​ 3.X、Y方向关键词 水平方向的关键词：
​ left、center、right
​ 垂直方向的关键词：
​ top、center、bottom

5）背景尺寸

​ background-size

1.auto：默认值，使用背景图片保持原样

2.percentage：当使用百分值时，不是相对于背景的尺寸大小来计算的，而是相对于元素宽度来计算的

3.cover：整个背景图片放大填充了整个元素

4.contain：让背景图片保持本身的宽高比例，将背景图片缩放到宽度或者高度正好适应所定义背景的区域

6）线性渐变

background:linear-gradient ( to left, color1, color2,…);

13、盒子模型

一个页面上所有的元素（标签）都存在自己的一个盒子模型

具体分为4个部分：

content:内容部分

padding:内容到边框的距离

border:盒子的边框

margin:外边框，到其他标签的距离

1）边框border

修改顺序

针对某一个属性的修改：xxx-top/bottom/lef/-xxx

颜色：

上边框颜色：border-top-color：blue;

同时四个边框颜色：border-color：blue;

第一个改上下，第二个改左右：border-color：red blue;

第一个改上，第二个改下，第三个左右border-color：yellow red blue;

顺时针修改上右下左：border-color：yellow red blue green;

宽度：

细：thin

medium：中等

thick：粗

borfer-width:thin medium thick 20px;

样式：

none:看不见值清空

hidden看不见值清空

dashed圆点虚线

solid 实线

double空心线

border-style：solid double；

简体写法：

border：red solid 5px;

外边距Margin

设置大小

与边框写法一样

margin：0px auto;当设置左右时，写入auto自动对齐；

若想自动对齐需满足：块元素、固定宽度

3）内边距padding

逻辑一样

4）计算一个标签具体占页面的位置

div{

height:100px;

width:500px;

margin:10px;

border:1px solid red;

padding:5px;

}

左外边距+左边框+左内边距+内容+右外边距+右边框+右内边距

10+1+5+500+5+1+10

5）box-sizing

盒子尺寸

​ 1.如果box-sizinginherit：继承父标签，根据父标签的值

height:100px;

width:500px;

margin:10px;

border:1px solid red;

padding:5px;

​ 2.如果box-sizing：content-box

内容宽度为500px(width:500px)

3.如果box-sizing：border-box

内容宽度为488px

左边框1+左内边距5+内容488+右外边距5+右边框1=500

idth:thin medium thick 20px;

样式：

none:看不见值清空

hidden看不见值清空

dashed圆点虚线

solid 实线

double空心线

border-style：solid double；

简体写法：

border：red solid 5px;

外边距Margin

设置大小

与边框写法一样

margin：0px auto;当设置左右时，写入auto自动对齐；

若想自动对齐需满足：块元素、固定宽度

3）内边距padding

逻辑一样

4）计算一个标签具体占页面的位置

div{

height:100px;

width:500px;

margin:10px;

border:1px solid red;

padding:5px;

}

左外边距+左边框+左内边距+内容+右外边距+右边框+右内边距

10+1+5+500+5+1+10

5）box-sizing

盒子尺寸

​ 1.如果box-sizinginherit：继承父标签，根据父标签的值

height:100px;

width:500px;

margin:10px;

border:1px solid red;

padding:5px;

​ 2.如果box-sizing：content-box

内容宽度为500px(width:500px)

3.如果box-sizing：border-box

内容宽度为488px

左边框1+左内边距5+内容488+右外边距5+右边框1=500

一朝737
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
CSS基础②
weixin_66768178的博客
04-29 436
1、什么是CSS3层叠样式表 Cascading Style Sheet层叠样式表，可以通过多个样式去表现。 2、div属于块级元素，占一整行。 3、span属于行内元素，出现新的span并不会换行。 <div>元素</div> <div>元素</div> <span>元素</span> <span>元素</span> 样式如上 4、CSS的基本语法结构 <style&g
CSS3基础(2)
小九九(●'◡'●)
02-23 492
CSS应用 CSS样式代码必须保存在.css类型的文本文件中，或者放在网页内<style>标签中，或者插在网页标签的style属性中。CSS样式的应用方法主要分为四种:行内样式，内嵌式，链接式以及导入式。 行内样式 行内样式就是把CSS样式直接放入代码行内的标签中，一般都会放入Style属性中，由于行内样式是直接插入标签中，所以它是一种最直接的方式，同样也是修改最不便捷的方式。 如:示例主要针对段落，<h>标签，<em>标签，<Strong标签>以及&
【前端】【CSS】基础知识
我的的博客哦
01-09 2180
🔰CSS也是一种标记语言；🔰CSS主要用于设置HTML的文本内容(字体，大小，对齐方式等)，图片外部(宽高，边框样式，边距)以及版面的布局和外观显示样式；🔰CSS可以美化HTML，让HTML更漂亮，让页面布局更简单；🔰由HTML专注做结构呈现，样式交给CSS，即结构(HTML)与样式(CSS)相分离；垂直的块级盒子显示就用标准流布局；多个块级盒子水平显示就用浮动布局；定位：如果元素自由在某个盒子内移动就用定位布局；1. 如果遇到一些结构和样式比较简单的小图标，就用字体图标。
CSS学习笔记（基础）
lol666111的博客
06-30 135
CSS 概述：是一种用来表现HTML或XML等文件样式的计算机语言 层叠式样式表 CSS可以用来修饰美化页面 CSS可以配合脚本语言动态地对网页各元素进型格式化 内容与表现分离，页面外观的维护更加容易 CSS基本语法 CSS规则由两个主要的部分组成：选择器以及一条或多天声明 选择器通常是需要改变样式的HTML元素 每条声明由一个属性和一个值组成 CSS导入方式 内联方式 将css样式
CSS_1
qzc_root的博客
12-28 540
CSS的概念 Cascading Style Sheet 级联样式表 表现HTML或XHTML文件样式的计算机语言 包括对字体、颜色、边距、高度、宽度、北京图片、网页定位等设定 CSS基本语法 <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>css演示</title> <!-- style标签 --> <style type
Web实验2 CSS基础应用
qq_45738743的博客
03-04 717
掌握在网页中引用CSS的方法； 掌握CSS的基本语法规则； 掌握CSS的常用选择器。 掌握盒子的特性及使用。
CSS3:CSS3 知识点提炼整理
05-08
CSS3核心知识点 CSS 选择器 背景 & 颜色 & 边框 字体 & 描边 & 倒影 动画 transform & transition & keyframes @media 媒体查询 flex 弹性盒 width: 50}, CSS进阶顺序 基础 能还原设计稿、兼容各种主流浏览器 盒子...
浅绿色瑜伽运动CSS3模板
08-23
浅绿色瑜伽运动CSS3模板是一款大气好看的瑜伽运动动画网站模板下载。
浅谈CSS3鼠标移入图片动态提示效果（transform）
09-24
本文主要探讨了如何使用CSS3中的`transform`属性来实现鼠标移入图片时的动态提示效果。`transform`属性在CSS3中扮演着重要角色，它允许我们对元素进行二维或三维空间的变换，包括位移、旋转、倾斜和缩放。 首先，...
CSS3 transform图片飞入动画特效
07-02
这是一款基于CSS3 transform图片飞入动画特效，仿唱吧首页图片从左右两边飞入动画效果。 文章来自 陌佑网 ym.tenpic.cn 转载请注明出处，谢谢!!!
CSS实现简单的瀑布流
Jet_Lover的博客
09-07 266
瀑布流原理 ：宽度固定，高度随机。 先看成果 不多说直接上代码。 HTML代码 <div class="content"> <img src="img/1.jpg"> <img src="img/2.jpg"> <img src="img/3.jpg"> <img src="img/4.jpg"> <img src="img/5.jpg"> <img src="img/6.jpg"
纯CSS实现的瀑布流
qq_27613933的博客
06-10 155
<style> html,body { margin:0; padding:0; height:100%; } /*column-count: 3,分三列 column-gap 列间的间隔距离10px*/ .masonry { column-count: 3; column-gap: 10px; } .item { break-inside: avoid; /*属性描述了在多列布局页面下的内容盒子如何中断，如果多列布局没有内容盒子，这个属性会被忽略。*/ box-
《望庐山瀑布》 李白
liuxiaowu19911121的专栏
09-19 642
日照香炉生紫烟，遥看瀑布挂前川。 飞流直下三千尺，疑是银河落九天。
CSS的三种样式
weixin_30786617的博客
01-21 195
1.外部样式》》》》两种导入方法 　　　　(1).链接外部样式表》》》rel=“stylesheet”表示在页面中使用这个外部样式表 　　　　　　　　　　　　　　　　type=“text/css”是指文件的类型是样式表文本 　　<link href=“文件所在位置” rel=“stylesheet” type=“text/css”>　 　　　　(2).导入外部样式表 　　...
css - 简介
renpinghao的专栏
06-21 178
CSS 概述 CSS 指层叠样式表 (Cascading Style Sheets) 样式定义如何显示 HTML 元素 样式通常存储在样式表中 把样式添加到 HTML 4.0 中，是为了解决内容与表现分离的问题 外部样式表可以极大提高工作效率 外部样式表通常存储在 CSS 文件中 多个样式定义可层叠为一 样式解决了一个普遍的问题 HTML 标签原本被设计为用于定义文档内容。通过使...
Flash 望庐山瀑布特效
czk_love_wyq的专栏
12-04 1761
1.打开Flash 2.导入图片，声音文件到库 3.因为动画中需要上下移动背景图片     所以在场景中 不能设置与背景图片大小一样，按照flash中场景默认大小即可。画出参考线，便于操作       4.在做的过程中需要与背景声音相一致，所以需要将图片以及声音一起拉入到场景，建立两个图层 5.首先，动画当中先出现诗的标题，建立新的图层，命名为诗的标题，播放声音，找到适当的位置，在
第四章-望庐山瀑布
weixin_30273763的博客
11-04 624
<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title>望庐山瀑布</title> <style type="text/css"> P{ font-size: 14px; color: green; } </style&...
HTML画空心圆
牛奶爱上咖啡的博客
10-16 9762
无标题文档     span{position:absolute; color: red}/*设置颜色*/        //////////////////////////////////////////画空心圆///////////////////////////////////////////// function emptyCircle(){ //    
前端html5css3笔记整理下载
最新发布
07-24
在CSS3笔记中，可以整理各种选择器、属性和值的用法，例如颜色、字体、背景、边框等的设置，同时还可以介绍一些更高级的特性，如过渡、动画、媒体查询等。此外，CSS3还支持一些新的布局方式，如弹性布局、网格布局等...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值