CSS与CSS3美化页面

最新推荐文章于 2024-06-20 21:05:52 发布

AllenCode7

最新推荐文章于 2024-06-20 21:05:52 发布

阅读量1.2k

点赞数 3

文章标签： css css3

本文链接：https://blog.csdn.net/AllenCode7/article/details/111601169

版权

一、CSS简介

1.1 什么是CSS?

CSS 指层叠样式表 (Cascading Style Sheets)

样式定义如何显示控制 HTML 元素,从⽽实现美化HTML⽹⻚。

样式通常存储在样式表中，⽬的也是为了解决内容与表现分离的问题

外部样式表(CSS⽂件)可以极⼤提⾼⼯作效率

多个样式定义可层叠为⼀，后者可以覆盖前者样式

1.2 样式层叠次序

⼀般⽽⾔，所有的样式会根据下⾯的规则层叠于⼀个新的虚拟样式表中，其中数字 4 拥有最⾼的优先权。

1.浏览器缺省设置
2.外部样式表
3.内部样式表（位于标签内部）

4.内联样式（在 HTML 元素内部）

  因此，内联样式（在 HTML 元素内部）拥有最⾼的优先权，这意味着它将优先于以下的样式声明：
   <head> åå标签中的样式声明，外部样式表中的样式声明，或者浏览器中的样式声明（缺省值）。

二、CSS基础语法

2.1 介绍

格式：选择器{属性:值;属性:值;属性:值;…}
在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        /* 样式修饰：h3标题和li列表 */
        h3{
    color:red;font-size: 30px;}
        li{
    color:green;font-size: 15px; line-height: 30px;}
    </style>
</head>
<body>
    <!-- CSS样式基础语法实例 -->
    <h3>什么是CSS?</h3>
    <ul>
        <li>CSS 指层叠样式表 (Cascading Style Sheets)</li>
        <li>样式定义如何显示控制 HTML 元素,从而实现美化HTML网页。</li>
        <li>样式通常存储在样式表中，目的也是为了解决内容与表现分离的问题</li>
        <li>外部样式表(CSS文件)可以极大提高工作效率</li>
        <li>多个样式定义可层叠为一，后者可以覆盖前者样式</li>
    </ul>
</body>
</html>

2.2 注释

格式： /* … */

三、CSS使用方式

3.1 如何插入样式表

插⼊样式表的⽅法有三种:

外部样式表(External style sheet)
内部样式表(Internal style sheet)
内联样式(Inline style)

3.2 外部导入方式（外部链入）

1）(推荐）就是在head标签中使⽤标签导⼊⼀个css⽂件，在作⽤于本⻚⾯，实现css样式设置

<link href="⽂件名.css" type="text/css" rel="stylesheet"/>

2）还可以使⽤import在style标签中导⼊css⽂件。

<style type="text/css">
 @import "style.css";
</style>

特点：作⽤于整个⽹站

优先级：当样式冲突时，就是采⽤就近原则，是值css属性离被修饰的内容最近的为主。

若没有样式冲突则采⽤叠加效果

举例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <!-- 外部样式表 -->
    <link rel="stylesheet" href="./css/my.css">
    
</head>
<body>
    <h1>CSS样式的使用方式</h1>
 
    <h4>插入样式表的方法有三种:</h4>
    <ul>
        <li>外部样式表(External style sheet)</li>
        <li>内部样式表(Internal style sheet)</li>
        <li>内联样式(Inline style)</li>
    </ul>
</body>
</html>

3.3 内部方式（内嵌样式）

就是在head标签中使⽤标签来设置css样式

<style type="text/css">
 ....css样式代码
</style>
<!-- 特点：作⽤于当前整个⻚⾯ -->

在这里插入图片描述

3.4 内联方式（行内样式）

就是在HTML的标签中使⽤style属性来设置css样式

格式： <html标签 style=“属性:值;属性:值;…”>被修饰的内容</html标签>

<p style="color:blue;font-family:⾪书">在HTML中如何使⽤css样式</p>
<!-- 特点：仅作⽤于本标签。-->

3.5 三种样式表总结

四、CSS常用选择器

4.1 css2的选择符(重要)

选择符的优先级：从⼤到小 [ID选择符]->[class选择符]->[html选择符]->[html属性]

也可以通过下列方式修改优先级规则：
在这里插入图片描述
1） html选择符（标签选择器）
就是把html标签作为选择符使⽤（用HTML的标签作为选择器的名字）

如 p{…} 网页中所有p标签采⽤此样式
h2{…} 网页中所有h2标签采⽤此样式

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        /*1，HTML选择器*/
        h3{
    color: aqua;}
    </style>
</head>
<body>
    <h1>CSS常用选择器（选择符）</h1>
 
    <h3>什么是CSS?</h3>
    <ul>
        <li>CSS 指层叠样式表 (Cascading Style Sheets)</li>
        <li>样式定义如何显示控制 HTML 元素,从而实现美化HTML网页。</li>
        <li>样式通常存储在样式表中，目的也是为了解决内容与表现分离的问题</li>
        <li>外部样式表(CSS文件)可以极大提高工作效率</li>
        <li>多个样式定义可层叠为一，后者可以覆盖前者样式</li>
    </ul>
</body>
</html>

2）class类选择符 (使⽤点.将⾃定义名（类名）来定义的选择符)

定义： .

类名{样式....} 匿名类
其他选择符名.类名{样式....}
使⽤：

<html标签 class="类名">...</html标签> 
.mc{color:blue;} /* 凡是class属性值为mc的都采⽤此样式 */
p.ps{color:green;} /*只有p标签中class属性值为ps的才采⽤此样式*/
注意：

类选择符可以在⽹⻚中重复使⽤

在这里插入图片描述

3） Id选择符
定义： #id名{样式…}

使⽤：<html标签 id=“id名”>…</html标签>

注意：id选择符只在⽹⻚中使⽤⼀次（一般情况下，一个id只出现在一处地方）
在这里插入图片描述

4）关联选择符（包含选择符）
格式：选择符1 选择符2 选择符3 …{样式…}

table a{....} /*table标签⾥的a标签才采⽤此样式*/
h1 p{color:red} /*只有h1标签中的p标签才采⽤此样式*/

（中间空格隔开）
在这里插入图片描述
等价于

5）组合选择符（选择符组）
格式：选择符1,选择符2,选择符3 …{样式…}

h3,h4,h5{color:green;} /*h3、h4和h5都采⽤此样式

6）伪类选(伪元素)择符
在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        /*1.html选择器*/
        h3{
    color:red;}
 
        /*2.类选择器*/
        /*将网页中class属性值为cc的标签采用此样式*/
        .cc{
    color:hotpink}
        /*class属性值为cc的h1标题标签采用此样式*/
        h1.cc{
    color:green;}
        .dd{
    background-color:#ddd;}
 
        /*3. id选择器*/
        /*id属性值为hid的标签采用此样式*/
        #hid{
    font-size:40px;}
 
        /*测试选择器的优先级*/
        #sid{
    color:greenyellow}
        .sc{
    color:green;background-color:#ddd;}
        span{
    color:red !important;font-size:22px;}
 
        /*4.关联选择器（包含选择器）*/
        /*ol标签下的li标签采用此样式*/
        ol li{
    color:lightseagreen}
        
        /*5.选择器组*/
        h1,h2,h3,h4,h5,h6{
    background-color: linen;font-family:Arial, Helvetica, sans-serif;}
        
        /*6. 伪类选择器*/
        a:link {
    color: #FF0000; text-decoration: none}             /* 未访问的链接 */
        a:visited {
    color: #00FF00; text-decoration: none}          /* 已访问的链接 */
        a:hover {
    color: #FF00FF; text-decoration: underline}     /* 鼠标在链接上 */
        a:active {
    color: #0000FF; text-decoration: underline}     /* 激活链接 */
    </style>
</head>
<body>
    <h1 class="cc">CSS的常用选择器（选择符）</h1>
 
    <h3 id="hid">什么是CSS?</h3>
    <ul>
        <li>CSS 指层叠样式表 (Cascading Style Sheets)</li>
        <li class="cc">样式定义如何显示控制 HTML 元素,从而实现美化HTML网页。</li>
        <li>样式通常存储在样式表中，目的也是为了解决内容与表现分离的问题</li>
        <li class="cc dd">外部样式表(CSS文件)可以极大提高工作效率</li>
        <li class="dd">多个样式定义可层叠为一，后者可以覆盖前者样式</li>
    </ul>
 
    <span class="sc" id="sid">CSS的常用选择器</span>
 
    <h4>插入样式表的方法有三种:</h4>
    <ol>
        <li>外部样式表(External style sheet)</li>
        <li>内部样式表(Internal style sheet)</li>
        <li>内联样式(Inline style)</li>
    </ol>
 
    <ul>
        <li><a href="a.html?id=1111">CSS语法实例</a></li>
        <li><a href="b.html">CSS样式使用方式</a></li>
    </ul>
</body>
</html>

五、CSS关系和属性选择器

5.1 关系选择器

div>p 选择所有作为div元素的⼦元素p

div+p 选择紧贴在div元素之后p元素

div~p 选择div元素后⾯的所有兄弟元素p

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS选择符实例</title>
    <style>
        /*ul中的所有子li标签都采用此样式*/
        /*ul li{color:red;}*/
 
        /*ul中的直接子li标签采用此样式（注意ol中的li不是）*/
        ul > li{
    color:blue;}
 
        /*紧邻div的一个p兄弟标签采用此样式*/
        /*div+p{color:red;}*/
        
        /*div后面所有兄弟p标签都采用此样式*/
        div~p{
    color:red;}
    </style>
</head>
<body>
    <h1>关系选择器</h1>
 
    <ul>
        <li>列表一级子项目1</li>
        <li>列表一级子项目2</li>
        <ol>
            <li>列表二级子项目1</li>
            <li>列表二级子项目2</li>
        </ol>
    </ul>
 
    <div>aaaaaa</div>
    <p>qqqqqqqqqq</p>
    <p>qqqqqqqqqq</p>
 
    <div>bbbbbb</div>
    <p>qqqqqqqqqq</p>
    <p>qqqqqqqqqq</p>
    <p>qqqqqqqqqq</p>
   
</body>
</html>

空格分隔
在这里插入图片描述

分隔

+分隔

~分隔

5.2 属性选择器

[attribute]选择具有attribute属性的元素。

[attribute=value]选择具有attribute属性且属性值等于value的元素。

[attribute~=value]选择具有attribute属性且属性值为⼀⽤空格分隔的字词列表，其中⼀个等于value的元素。

[attribute|=value]选择具有att属性且属性值为以val开头并⽤连接符"-"分隔的字符串的E元素。

[attibute^=value]匹配具有attribute属性、且值以valule开头的E元素

[attribute$=value]匹配具有attribute属性、且值以value结尾的E元素

[attribute*=value]匹配具有attribute属性、且值中含有value的E元素

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS中的属性选择器</title>
    <style>
        /*含有title属性的li标签采用此样式*/
        /* li[title]{color:red;}*/
 
        /*含有title属性值为bb的li标签采用此样式*/
        /*li[title="bb"]{color:red;}*/
 
        /*含有class属性值（以空格分隔开）中有aa的li标签采用此样式*/
       /* li[class~="aa"]{color:red;}*/
 
       /*含有class属性值（以-分隔开)以aa开头的li标签采用此样式*/
       /*li[class|="aa"]{color:red;}*/
 
       /*class属性值是以b子串开头的*/
       /*li[class^="b"]{background-color:#ddd;}*/
 
       /*class属性值是以dd结尾的li标签*/
       /*li[class$="dd"]{background-color:#ddd;}*/
 
       /*class属性值中含有bb的li标签*/
       /*li[class*="bb"]{background-color:#ddd;}*/
    </style>
</head>
<body>
    <h1>CSS中的属性选择器</h1>
    <ul>
        <li class="aa-bb" title="html">1.html选择器</li>
        <li class="bb-cc">2.class类选择器</li>
        <li class="cc dd" title="id">3.id选择器</li>
        <li class="bb-dd">4.关联选择器</li>
        <li class="aa bb" title="bb">5.组合选择器</li>
        <li class="bb aa">6.伪类选择器</li>
    </ul>
</body>
</html>

attribute
在这里插入图片描述

attribute=value
在这里插入图片描述

attribute~=value
在这里插入图片描述

attribute|=value

attibute^=value

attribute$=value

attribute*=value

六、CSS伪类选择器

6.1 结构性伪类选择器

星号为常用

::first-letter设置对象内的第⼀个字符的样式。

::first-line设置对象内的第⼀⾏的样式。

:before设置在对象前（依据对象树的逻辑结构）发⽣的内容。

:after设置在对象后（依据对象树的逻辑结构）发⽣的内容。

:lang(language)匹配使⽤特殊语⾔的E元素。

:element1~element2:

:first-of-type匹配同类型中的第⼀个同级兄弟元素

:last-of-type匹配同类型中的最后⼀个同级兄弟元素

:only-of-type匹配同类型中的唯⼀的⼀个同级兄弟元素

:only-child匹配⽗元素仅有的⼀个⼦元素

*:nth-child(n)匹配⽗元素的第n个⼦元素

:nth-last-child(n)匹配同类型中的倒数第n个同级兄弟元素

*:first-child 匹配⽗元素的第⼀个⼦元素

* :last-child 匹配⽗元素的最后⼀个⼦元素

:root匹配元素在⽂档的根元素。在HTML中，根元素永远是HTML

:empty匹配没有任何⼦元素（包括text节点）的元素

6.2 *状态伪类选择器

星号为常用

:link 设置超链接a在未被访问前的样式。
:visited 设置超链接a在其链接地址已被访问过时的样式
:active 设置元素在被⽤户激活（在⿏标点击与释放之间发⽣的事件）时的样式
*:hover 设置元素在其⿏标悬停时的样式
*:focus 设置元素在其获取焦点时的样式
:target 匹配相关URL指向的E元素
:enabled 匹配⽤户界⾯上处于可⽤状态的元素
:disabled 匹配⽤户界⾯上处于禁⽤状态的元素
:checked 匹配⽤户界⾯上处于选中状态的元素
:not(selector)匹配不含有selector选择符的元素
::selection 设置对象被选择时的样式

6.3 其他伪类选择器

E:not(s) ： {attribute}

匹配所有不匹配简单选择符s的元素E

p:not(.bg) {background-color:#00FF00;}

七、CSS的尺寸和单位

7.1 尺寸

在这里插入图片描述

7.2 颜色

在这里插入图片描述

color颜色属性值
在这里插入图片描述

八、CSS字体与文本属性

8.1 字体属性：font

星号为常用

 font: 简写

*font-size: 字体⼤⼩：20px，60%基于⽗对象的百分⽐取值

*font-family： 字体：宋体，Arial

 font-style： normal正常；italic斜体； oblique倾斜的字体

*font-weight： 字体加粗 ：bold

 font-variant: small-caps ⼩型的⼤写字⺟字体

 font-stretch: [了解]⽂字的拉伸是相对于浏览器显示的字体的正常宽度（⼤部分浏览器不⽀持）。

在这里插入图片描述

8.2 文本属性

 text-indent: ⾸⾏缩进：text-indent:2em;
 text-overflow： ⽂本的溢出是否使⽤省略标记（...）。clip|ellipsis（显示省略标记）
*text-align: ⽂本的位置：left center right
 text-transform：对象中的⽂本的⼤⼩写：capitalize(⾸字⺟)|uppercase⼤写|lowercase⼩写
*text-decoration: 字体画线：none⽆、underline下画线，line-through贯穿线
 text-decoration-line：[了解]⽂本装饰线条的位置（浏览器不兼容）
*text-shadow: ⽂本的⽂字是否有阴影及模糊效果
 vertical-align: ⽂本的垂直对⻬⽅式
 direction：⽂字流⽅向。ltr | rtl
 white-space:nowrap; /* 强制在同⼀⾏内显示所有⽂本*/
*letter-spacing: ⽂字或字⺟的间距
 word-spacing：单词间距
*line-height：⾏⾼
*color： 字体颜⾊

九、CSS背景属性

9.1 背景属性background

background：简写

*background-color: 背景颜⾊

*background-image: 背景图⽚

*background-repeat：是否重复，如何重复?(默认repeat横竖平铺，repeat-x横铺，repeat-y竖铺)

*background-position：定位（top，center，bottom，right）

 background-attachment： 是否固定背景，
 	scroll:默认值。背景图像是随对象内容滚动
	fixed:背景图像固定

css3的属性:
*background-size: 背景⼤⼩，如 background-size:100px 140px;

多层背景：

background:url(test1.jpg) no-repeat scroll 10px 20px,
     url(test2.jpg) no-repeat scroll 50px 60px,
     url(test3.jpg) no-repeat scroll 90px 100px;
 
 background-origin:content-box,content-box,content-box;
 
 background-clip:padding-box,padding-box,padding-box;
 
 background-size:50px 60px,50px 60px,50px 60px;

实例代码如下，images中的图片可以自行设置

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        /* 背景图片固定 不随页面滚动
        body{
            background-image: url(./images/Meinv083.jpg);
            background-attachment: fixed;
        }
        */
        div{
    
            width:400px;
            height:300px;
            border:1px solid #ddd;
            margin:10px;
            float:left;
        }
        div.c1{
    
            /*
            background-color:cadetblue;
            background-image: url("./images/1.gif");
            background-repeat: no-repeat;
            background-position: bottom right;
            */
            /*等价于上面简写：背景图片1.gif，上下左右都居中，不平铺，背景颜色*/
            background: url(./images/1.gif) center center no-repeat cadetblue;
 
        }
 
        div.c2{
    
            background-image:url(./images/Meinv083.jpg);
            background-repeat: no-repeat;
            background-position: -100px -320px;
        }
 
        div.c3{
    
            /*效果同上（简写）*/
            background:url(./images/Meinv083.jpg) -100px -320px no-repeat;
        }
 
        div.c4{
    
            background:url(./images/repeat.png) 0px 0px repeat-x;
        }
 
        /* 扣导航栏*/
        div.c5{
    
            background:url(./images/repeat.png) 0px -92px repeat-x;
            height:40px;
        }
 
        /* 扣小图标*/
        div.c6{
    
            background: url(./images/v_icon.png) -110px -115px no-repeat;
            width:30px;height:30px;
        }
 
        /* 鼠标放在小图标上变色的做法*/
        div.c7,div.c8,div.c9{
    
            width:30px;
            height:28px;
            border: none;
            background: url(./images/step.gif) 0px 0px no-repeat;
        }
        div.c8{
    background-position: -31px 0px;}
        div.c9{
    background-position: -62px 0px;}
        div.c7:hover{
    background-position: 0px -28px;}/* 鼠标放上的瞬间 图片上移从而展示出下面的图标 实现反馈功能*/
        div.c8:hover{
    background-position: -31px -28px;}
        div.c9:hover{
    background-position: -62px -28px;}
 
 
        div.c10{
    
            background: url(./images/Meinv039.jpg) no-repeat;
            background-size:100%;
        }
 
        /* 渐变色*/
        div.c11{
    
            background-image: repeating-linear-gradient(to right,#f00,#fff);
        }
    </style>
</head>
<body>
    <h1>CSS的背景属性：background</h1>
    <div class="c1"></div>
    <div class="c2"></div>
    <div class="c3"></div>
    <div class="c4"></div>
    <div class="c5"></div>
    <div class="c6"></div>
    <div class="c7

最低0.47元/天解锁文章

AllenCode7

关注

3
点赞
踩
4

收藏

觉得还不错? 一键收藏
0
评论
CSS与CSS3美化页面

目录一、CSS简介1.1 什么是CSS?1.2 样式层叠次序二、CSS基础语法三、CSS使用方式四、CSS常用选择器五、CSS关系和属性选择器六、CSS伪类选择器七、CSS的尺寸和单位八、CSS字体与文本属性九、CSS背景属性十、CSS边框属性十一、CSS内外补白属性十二、CSS盒子模型实例十三、CSS定位属性十四、CSS布局属性十五、CSS实现导航十六、CSSflex弹性盒子介绍十七、CSS用户界面和多栏属性介绍十八、CSS表格和过度属性介绍十九、CSS旋转动画和媒体查询属性介绍二十、CSS字体图标的使用
复制链接

扫一扫