尚硅谷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)

相关文章
|
2天前
|
XML 前端开发 JavaScript
前端简介(HTML+CSS+JS)
前端简介(HTML+CSS+JS)
|
3天前
|
前端开发 开发者
CSS进阶-CSS3多列布局
【6月更文挑战第14天】CSS3的多列布局简化了复杂布局,提供杂志样式排版。通过`column-*`属性如`column-count`和`column-gap`实现内容分割和列间距控制。常见问题包括内容溢出、列间距不当和兼容性问题。解决方法包括使用`word-break`和`hyphens`处理长单词,灵活设置列宽和列数,以及为旧浏览器提供回退方案。代码示例展示了一个自动平衡列高的两列布局。理解并解决这些问题将帮助开发者更好地利用CSS3多列布局。尽管有兼容性挑战,但它是现代网页设计的重要工具。
|
3天前
|
缓存 前端开发 JavaScript
从HTML、CSS以及其他方面介绍一些移动端网页性能优化的策略
【6月更文挑战第14天】本文探讨了移动端网页性能优化的重要性,并提出了HTML、CSS及其他方面的优化策略。HTML方面,建议精简结构、使用语义化标签、异步加载脚本和压缩文件。CSS优化包括简化样式、利用CSS3动画、媒体查询及压缩文件。其他策略涉及图片和字体优化、缓存利用、压缩传输数据、减少HTTP请求及监听网络状态。通过这些方法,可提升网页性能,改善用户体验。
8 1
|
3天前
|
缓存 移动开发 前端开发
在PWA的开发中,HTML与CSS作为前端技术的基础,发挥着至关重要的作用
【6月更文挑战第14天】PWA(渐进式网页应用)借助HTML和CSS,提供接近原生应用的体验。HTML构建页面结构和内容,响应式设计适应各种设备,语义化标签提升可访问性,Manifest文件配置应用元数据,离线页面保证无网时体验。CSS则用于定制主题样式,创建动画效果,实现响应式布局,并管理字体和图标。两者协同工作,确保PWA在不同环境下的优秀性能和用户体验。随着前端技术进步,HTML与CSS在PWA中的应用将更加深入。
9 2
|
5天前
|
前端开发 数据安全/隐私保护
紫色渐变登陆布局html+css代码
这是一段关于网页设计的代码示例,使用纯CSS实现了登录界面的样式。HTML部分包括一个简单的登录表单,包含用户名、密码输入框和登录、注册按钮。CSS部分则定义了各种元素的样式,如背景色、边框、字体颜色等,并使用渐变效果和过渡动画来增强视觉效果。整个设计采用了响应式布局,适应不同设备的屏幕宽度。
15 0
|
5天前
|
前端开发 数据安全/隐私保护 容器
简约渐变色登陆布局html+css代码
这是一段包含HTML和CSS代码的摘要。HTML部分定义了一个基本的网页结构,包括`&lt;html&gt;`、`&lt;head&gt;`、`&lt;body&gt;`标签,以及一个简单的登录界面,由一个容器`.container`包含一个登录框`.login-wrapper`,登录框内有输入框和登录按钮。CSS部分设置了全局样式,如字体、边距,并为HTML元素添加了样式,如背景渐变色、文字对齐、输入框和按钮的样式等。整个代码展示了创建一个具有响应式布局和特定视觉效果的简洁登录页面。
14 0
|
5天前
|
前端开发 安全 数据安全/隐私保护
Web实战丨基于django+html+css+js的在线博客网站
Web实战丨基于django+html+css+js的在线博客网站
11 2
|
5天前
|
数据库 数据安全/隐私保护 Python
Web实战丨基于django+html+css+js的电子商务网站
Web实战丨基于django+html+css+js的电子商务网站
19 3
|
5天前
|
存储 前端开发 测试技术
Web实战丨基于django+html+css的在线购物商城
Web实战丨基于django+html+css的在线购物商城
24 2
|
6天前
|
前端开发 JavaScript 开发者
CSS基础-CSS3过渡与动画
【6月更文挑战第11天】本文介绍了CSS3的过渡和动画特性,用于创建平滑的视觉效果。过渡通过`transition`属性实现元素样式改变的缓动效果,常用于按钮悬停、图片切换等场景。易错点包括忘记设置初始和最终样式,以及过渡效果不明显。动画则利用`@keyframes`定义关键帧序列,适用于循环播放的图标旋转等复杂效果。动画的错误可能在于结束状态处理和无限循环的性能问题。通过代码示例和避免常见陷阱,开发者能更好地利用CSS3动画提升网页交互体验。关键在于适度使用,保持界面流畅舒适。

热门文章

最新文章