尚硅谷html5+css3(2)CSS5基本知识

简介: 尚硅谷html5+css3(2)CSS5基本知识

1.网页分为三个部分:

结构:HTML

表现:CSS

行为JavaScript

CSS:层叠样式表,网页实际上是一个多层结构,通过CSS可以分别为网页的每一个层来设置样式,最终用户只看最上面的一层,总之,CSS用来设置网页中元素的样式


2.使用CSS修改元素的样式:

(1)在标签内部通过style属性设置元素的样式(内联样式,只能对一个标签生效,一般不用)

<p style="color: red;font-size: 60px;"> style </p>


282c1e86f5204c9ba90ae4044780e7e5.jpg

(2)将样式编写到head的style标签中(内部样式表:可以同时为多个标签设置样式,修改时只用修改次此处即可)(但只能对一个页面起作用)

例:使所有p标签都为绿色:

 
<head>
    <style>
        p { color: green; }
    </style>
</head>


(3)对多个网页起作用(外部样式表)

将CSS样式编写到一个外部CSS文件中,使样式在不同页面复用。还可以使用浏览器的缓存机制,从而加快网页的加载速度,提高用户体验

即创建style.css文件:

p { color: green; }


通过link标签引入外部CSS文件

<link rel="stylesheet" href="./style.css">


3.CSS的基本语法

在<style>标签中不属于html,所以要用CSS的标准写

<head>
    <style>
        /*CSS注释*/
        /*
        CSS基本语法:
        选择器 声明块
        选择器:通过选择器可以选中页面中指定元素
            例:h1:选中页面所有h1元素
        声明块:通过声明块来指定要为元素设置的格式
            例:color: blue;
            最后一个;可以省略
        */
        h1 {
            color: blue;
        }
    </style>
</head>
 
<body>
    <h1> 111 </h1>
</body>


c4d28dce414f4060ba4813528d4ba40f.jpg


4.CSS的常用选择器

(1)元素选择器

<head>
    <style>
        /*
        元素选择器:
            作用:根据标签名选中指定的元素
            语法:标签名+{}
            例子:p{} h1{} div{}
        */
        p {
            color: blue;
        }
    </style>
</head>
 
<body>
    <h1> 111 </h1>
    <p> p1 </p>
    <p> p2 </p>
</body>


6142a385e789434b87ae624557ec5ac7.jpg

(2)id选择器(设置id时保证唯一性)

<head>
    <style>
        /*若将第二行的p单独设置为红色,则使用id选择器
        作用:根据元素的id属性选中一个元素
        语法:#+id+{}
        例子:#12{color:red}
        */
        #abc {
            color: red
        }
    </style>
</head>
 
<body>
    <h1> 111 </h1>
    <p> p1 </p>
    <p id="abc"> p2 </p>
</body>


5fc9b70eaf924db8bcfc5a257f6a5c57.jpg

(3)class标签(多个class用空格隔开)

<head>
    <style>
        /*类选择器:
            class是一个标签的属性,他和id相似,不同的是class可以重复使用
            作用:根据元素的class属性值选中一组元素
            语法:.+class+{}
        */
        .abc {color: red}
        .bc {font-size: 50px;}
    </style>
</head>
 
<body>
    <h1> 111 </h1>
    <p> p1 </p>
    <p class="abc bc"> p2 </p>
    <p class="abc"> p3 </p>
</body>


3cd1faebe2ef4c469da2bd57294c8e9a.jpg

(4)通配选择器

<head>
    <style>
        /*通配选择器
            作用:选中页面中的所有元素
            语法:*
        */
        *{color: red}
    </style>
</head>
<body>
    <h1> 111 </h1>
    <p> p1 </p>
</body>


bf93e75f8d3543de83b1c8f2a2d43094.jpg


5.复合选择器

(1)交集选择器 .

<head>
    <style>
        /*将class为red的div字体大小设置为30px
        使用交集选择器
            作用:选中同时复合多个条件的元素
            语法:选择器1+.+选择器2+{}
            注意:若有元素选择器,则用元素选择器开头
            */
        div.red {font-size: 30px;}
    </style>
</head>
 
<body>
    <div class="red"> div </div>
    <p class="red"> p </p>
</body>


97c88d39e0984cef9631648ea6da63c8.jpg

(2)并集选择器 ,

<head>
    <style>
        /*同时选中h1和span设置为绿色
        使用并集选择器
            作用:同时选择多个选择器对应的元素
            语法:选择器1+,+选择器2+{}
            注意:若有元素选择器,则用元素选择器开头
            */
        h1,span {color: green;}
    </style>
</head>
 
<body>
    <h1 class="red"> div </h1>
    <span class="red"> p </span>
</body>


2b0e3c41379e41f3bd4855e27372b3cc.jpg

6.关系选择器

<body>
    <div>
        我是div
        <p>
            我是div中的p
            <span>我是div-p-span</span>
        </p>
        <span>我是div-span</span>
    </div>
</body>


(1)子元素选择器

<head>
    <style>
    /*为div的子元素span(不是p里的span)设置一个字体颜色:红色
        子元素选择器
            作用:选中指定父元素的指定子元素
    */
        div > span {
            color: red;
        }
    </style>
</head>


52941e16eb764cc5b9de045a28312e44.jpg

(2)后代元素选择器

  /*后代元素选择器*/
        div span {color: red;}


(3)兄弟元素选择器

        /*兄弟元素选择器:(都是选择后面的)
            选择下一个兄弟
                语法:当前+下一个(要修改的)
            选择下面所有兄弟
                语法:兄~弟(要修改的)
         */
        p + span {
            color: red;
        }
        p ~ span {
            color: red;
        }


7.属性选择器

<body>
    <p title="a"> 1</p>
    <p title="ab"> 2</p>
    <p title="c"> 2</p>
    <p> 3</p>
</body>


        /*属性选择器1:
            [属性名],让p标签中有title的颜色变为红色
            (不关注title里的具体值)
            选择含有指定属性的元素 
            */
        p[title] {
            color: red;
        }
 

391fc5b2fc8547f8a541b86257561678.jpg

 /*属性选择器2:
            [属性名=属性值],让p标签中title=b的颜色变为红色
            选择含有指定属性和属性值的元素
            */
        p[title=a] {
            color: red;
        }

8b88bc11d5e04332aca4b71f52200b0f.jpg


 /*属性选择器3/4/5:
            [属性名^=属性值],选择以属性值开头的元素
            例:选择以a开头的元素
            [属性名¥=属性值],选择以属性值结尾的元素
            [属性名*=属性值],选择属性值中含有某元素的元素
            */
        p[title^=a] {
            color: red;
        }

76b164f7cdac46f99c668f38cba46cc7.jpg

8.伪类选择器

<head>
    <style>
        /*将ul里的第一个li设置为红色*/
        ul > li.first {color: red;}
    </style>
</head>
 
<body>
    <!--ul>5*li-->
    <ul>
        <li class="first">第1个</li>
        <li>第2个</li>
        <li>第3个</li>
        <li>第4个</li>
        <li>第5个</li>
    </ul>
</body>


2de6945299c54e26bbe8f30a80553b0f.jpg

这个将第一个li设置为红色,若添加li在此前面,则新的第一个li不为红色

解决方法:使用伪类选择器

<head>
    <style>
        /*将ul里的第一个li设置为红色*/
        /*使用伪类(用来描述一个元素的特殊状态)
        比如:第一个元素/被点击的元素
        伪类一般情况下用:开头*/
        /*:first-child:冒号前面元素的第一个子元素(总可以确保第一个为红色)*/
        ul>li:first-child {
            color: red;
        }
 
        /*:last-child:冒号前面元素的最后一个子元素(总可以确保最后一个为绿色)*/
        ul>li:last-child {
            color: green;
        }
 
        /*:nth-child(n):冒号前面元素的第n个子元素(总可以确保第n个为蓝色)
         若()写n:全选(n取0~正无穷)
         若()写2n/even:选中偶数位的元素
         若()写2n+1/odd:选中偶数位的元素
         */
        ul>li:nth-child(3) {
            color: blue;
        }
        /*这些伪类是根据所有子元素进行排序
        即若最前面加span,则都不生效 要用ul>span:first-child选第一个*/
 
        /*:first-of-type  :last-of-type  :nth-last-of-type()功能与上述相同
        找相同类型的第?个,即使用:first-of-type可以在span加入的情况下对第一个li进行改变*/
    </style>
</head>
 
<body>
    <!--ul>5*li-->
    <ul>
        <li>第1个</li>
        <li>第2个</li>
        <li>第3个</li>
        <li>第4个</li>
        <li>第5个</li>
    </ul>
</body>


0a0c90a74d0842ffa1ade8180c9aeddb.jpg

<head>
    <style>
        /*:not()否定伪类
     将符合条件的元素从选择其中去除*/
        ul>li:not(li:nth-child(2)) {
            color: aqua;
        }
    </style>
</head>

58a01d1d072f49f0915c5df1d4a20235.jpg

10.超链接的伪类

<head>
    <style>
        /*一般不用*/
        /*link和visited只适用于a*/
        /*:link:表示没访问过的链接*/
        a:link {
            color: red;
        }
        /*:visited:表示访问过的链接,只能改颜色*/
        a:visited {
 
            color: green;
        }
    </style>
</head>
<!--
    通过伪类区分:
    1.没访问过的链接
    2.访问过的链接
-->
 
<body>
    <a href="https://www.baidu.com/"> 访问过的链接</a>
    <br>
    <br>
    <a href="https://www.baidu.com/"> 没访问过的链接</a>
</body>


表示鼠标移入的状态:a:hover  表示鼠标点击的状态:a:active(这两个所有元素都可以用)

<head>
    <style>
        /*表示鼠标移入的状态:a:hover*/
        a:hover {
            color: red;
        }
 
        /*表示鼠标点击的状态:a:active*/
        a:active {
            font-size: 30px;
            color: green;
        }
    </style>
</head>
<!--
    通过伪类区分:
    1.没访问过的链接
    2.访问过的链接
-->
 
<body>
    <a href="https://www.baidu.com/"> 链接1</a>
    <br>
    <br>
    <a href="https://www.baidu.com/"> 链接2</a>
</body>


8b89b46366c64ab0873369a6580062f1.jpg

11.伪元素选择器

<head>
    <style>
        /*伪元素:表示页面中一些特殊的元素(如首字母)
      ::first-letter:第一个字母
      ::first-line:第一行
      ::selection:鼠标选中的内容
      */
        p::first-letter {
            font-size: 50px;
        }
 
        p::first-line {
            background-color: yellow;
        }
 
        p::selection {
           color: green;
        }
    </style>
</head>
 
<body>
    <!--首字母下沉-->
    <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Minima obcaecati iusto, illum sapiente consequatur hic
        harum exercitationem perspiciatis deleniti? Autem ducimus qui recusandae impedit voluptatum voluptate quibusdam
        esse dignissimos pariatur.
    </p>
</body>


1ce375cc99d540a0a91a7cf91d16da8a.jpg

<head>
    <style>
        /*伪元素:表示页面中一些特殊的元素(如首字母)
      ::before 元素起始位置  在>和h之间
      ::after 元素最后位置  在u和<之间
      before和after必须结合content使用(添加内容)
      */
        div::before{
            content: 'abc';
            color: red;
        }
        div::after{
            content: 'hhhhh';
            color: green;
        }
    </style>
</head>
 
<body>
    <div>hello hello how are you</div>
</body>

9023426d3c6a40ba8d9714a173f52242.jpg

12.样式的继承

<head>
    <style>
        /*样式的继承:我们为一个元素设置的样式同时也会应用到它的后代上
        并不是所有的样式都会被继承,比如背景、布局相关的不会被继承*/
        p{
            color: red;
        }
    </style>
</head>
<!--span元素继承了父亲p的style-->
<body>
    <p>我是一个p元素
        <span>我是p元素中的span元素</span>
    </p>
</body>


f11f0eda3293493fba6963142ba32320.jpg

13.选择器的权重

<head>
    <style>
        div {
            color: yellow;
        }
        .red {
            color: red;
        }
    </style>
</head>
<!--样式的冲突:
    当我们通过不同的选择器选中相同的元素,并为相同的样式设置不同的值
    发生样式冲突时,应用哪个样式由选择器的权重(优先级)决定
    选择器的权重从高到低:内联样式,id选择器,类和伪类选择器,元素选择器
    若优先级相同,则优先使用下面的样式
    可以在某样式后面加!inportant,则此样式为最高优先级
-->
 
<body>
    <div id="box1" class="red">我是div
    </div>
</body>


516d71e4d5d24e609da34cc0c8c0795e.jpg

14.像素和百分比

<head>
    <style>
        .box1 {
            /*长度单位:
                像素 px
                百分比
                    */
            width: 200px;
            height: 200px;
            background-color: orange;
        }
        .box2 {
            /*百分比:将属性设置为相对于其父元素属性的百分比
            使用百分比可以使子元素跟随父元素的改变而改变
                    */
            width: 50%;
            height: 70%;
            background-color: green;
        }
    </style>
</head>
<body>
    <div class="box1">11 <div class="box2">22</div>
    </div>
</body>


64f03fce4a4141d2a8bc2aff0cf31664.jpg

<head>
    <style>
        html{
            font-size: 50px;
        }
        .box1 {
            /*em:相对于元素的字体大小来计算的
            1em=1font-size
            em会根据字体大小的改变而改变*/
            font-size: 20px;
            width: 10em;
            height: 10em;
            background-color: red;
 
        }
 
        .box2 {
            /*rem:相对于根元素(html)的字体大小来计算的
            1em=1font-size
            em会根据字体大小的改变而改变*/
            font-size: 50px;
            width: 10em;
            height: 10em;
            background-color: blue;
        }
    </style>
</head>
 
<body>
    <div class="box1">11 <div class="box2">22</div>
    </div>
</body>

103906e8a4ea44fab60840cefa8173c0.jpg

15.RGB/RGBA值:

使用颜色名,比如red,yellow等

使用RGB值,0~255(0%~100%之间)

使用RGBA,A代表不透明度,用.n表示(1表示完全不透明,0表示完全透明)

使用十六进制的RGB值:#红色绿色蓝色,如果两位重复可以简写,例:#ffffff可以简写为#fff


16.HSL/HSLA值:

H:色相  (0-360)

S:饱和度 颜色的浓度(0-100)

L:亮度 (0-100)

相关文章
|
1天前
|
前端开发 数据安全/隐私保护
紫色渐变登陆布局html+css代码
这是一段关于网页设计的代码示例,使用纯CSS实现了登录界面的样式。HTML部分包括一个简单的登录表单,包含用户名、密码输入框和登录、注册按钮。CSS部分则定义了各种元素的样式,如背景色、边框、字体颜色等,并使用渐变效果和过渡动画来增强视觉效果。整个设计采用了响应式布局,适应不同设备的屏幕宽度。
7 0
|
1天前
|
前端开发 数据安全/隐私保护 容器
简约渐变色登陆布局html+css代码
这是一段包含HTML和CSS代码的摘要。HTML部分定义了一个基本的网页结构,包括`&lt;html&gt;`、`&lt;head&gt;`、`&lt;body&gt;`标签,以及一个简单的登录界面,由一个容器`.container`包含一个登录框`.login-wrapper`,登录框内有输入框和登录按钮。CSS部分设置了全局样式,如字体、边距,并为HTML元素添加了样式,如背景渐变色、文字对齐、输入框和按钮的样式等。整个代码展示了创建一个具有响应式布局和特定视觉效果的简洁登录页面。
9 0
|
2天前
|
前端开发 安全 数据安全/隐私保护
Web实战丨基于django+html+css+js的在线博客网站
Web实战丨基于django+html+css+js的在线博客网站
9 2
|
2天前
|
数据库 数据安全/隐私保护 Python
Web实战丨基于django+html+css+js的电子商务网站
Web实战丨基于django+html+css+js的电子商务网站
15 3
|
2天前
|
存储 前端开发 测试技术
Web实战丨基于django+html+css的在线购物商城
Web实战丨基于django+html+css的在线购物商城
17 2
|
3天前
|
前端开发 JavaScript 开发者
CSS基础-CSS3过渡与动画
【6月更文挑战第11天】本文介绍了CSS3的过渡和动画特性,用于创建平滑的视觉效果。过渡通过`transition`属性实现元素样式改变的缓动效果,常用于按钮悬停、图片切换等场景。易错点包括忘记设置初始和最终样式,以及过渡效果不明显。动画则利用`@keyframes`定义关键帧序列,适用于循环播放的图标旋转等复杂效果。动画的错误可能在于结束状态处理和无限循环的性能问题。通过代码示例和避免常见陷阱,开发者能更好地利用CSS3动画提升网页交互体验。关键在于适度使用,保持界面流畅舒适。
|
7天前
|
Web App开发 移动开发 前端开发
Web网页制作-知识点(3)——HTML5新增标签、CSS简介、CSS的引入方式、选择器、字体属性、背景属性、表格属性、关系选择器 二
Web网页制作-知识点(3)——HTML5新增标签、CSS简介、CSS的引入方式、选择器、字体属性、背景属性、表格属性、关系选择器 二
12 1
|
7天前
|
移动开发 前端开发 HTML5
Web网页制作-知识点(3)——HTML5新增标签、CSS简介、CSS的引入方式、选择器、字体属性、背景属性、表格属性、关系选择器一
Web网页制作-知识点(3)——HTML5新增标签、CSS简介、CSS的引入方式、选择器、字体属性、背景属性、表格属性、关系选择器 一
23 1