Day18CSS

最新推荐文章于 2024-08-03 14:54:19 发布
最新推荐文章于 2024-08-03 14:54:19 发布
阅读量103 收藏
点赞数
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/yuanlcj/article/details/114223863
版权

CSS

如何学习

  1. CSS是什么
  2. CSS怎么使用（快速入门）
  3. CSS选择器（重点+难点）
  4. 美化网页（文字，阴影，超链接，列表，渐变……）
  5. 盒子模型
  6. 浮动
  7. 定位
  8. 网页动画（特效）

1.1、 什么是CSS

Cascading Style Sheet 层叠样式表

CS：表现（美化网页）

​ 字体 颜色 边距 高度 宽度 背景图片 网页定位 网页浮动……

1.2、发展史

CSS1.0

CSS2.0 DIV（块）+CSS,HTML与CSS结构分离的思想

CSS2.1浮动定位

CSS3.0圆角，阴影，动画 …… 浏览器兼容性

1.3、快速入门

规范

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-O0Olr7dG-1614495481000)(C:\Users\lcj\AppData\Roaming\Typora\typora-user-images\image-20210222093027312.png)]

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>我的第一个css程序</title>
    <style>
        h1{
            color: #ff634c;
        }
    </style>

<!--    <link rel="stylesheet" href="css/style.css">-->
</head>
<body>
<h1>我是一级标题</h1>
</body>
</html>

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-njGoZlF5-1614495481003)(C:\Users\lcj\AppData\Roaming\Typora\typora-user-images\image-20210222111039470.png)]

css的优势：

  1. 内容和表现分离
  2. 网页结构表现统一，可以实现复用
  3. 样式十分丰富
  4. 建议使用独立于html的css文件
  5. 利用SEO，容易被搜索引擎收录

Vue框架；不容易被搜索引擎收录

1.4CSS的3种导入方式

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>我的第一个css程序</title>
<!--内部样式-->
    <style>
        h1{
            color: #ff634c;
        }
    </style>
<!--外部样式-->
    <link rel="stylesheet" href="css/style.css">
</head>
<body>
<!--行内样式-->
<h1 style="color: #1b3cff">我是一级标题</h1>
</body>
</html>

遵从就近原则：离元素进的先表现

拓展：外部样式的第二种方法

导入式：CSS2.1特有的

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>导入式</title>
<!--外部样式  导入式-->
    <style>
        @import url("css/style.css");
    </style>
<!--外部样式  链接式-->
    <link rel="stylesheet" href="css/style.css">
</head>
<body>

<h1 >我是一级标题</h1>
</body>
</html>

这种方式会出现先出现网页文字框架，后加载样式，然后网页的样式才出现

2、选择器

作用：选择页面上的某一个元素或者某一类元素

2.1、基本选择器

  1. 标签选择器

  2. <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>基本选择器</title>
<!--    标签选择器
通过标签名{}来使用  会选择该页面所有的同类标签-->
    <style>
        h1{
            color: #892020;
            background: aqua;
            border-radius: 24px;
        }
        p{
            font-size: 80px;
        }
    </style>
</head>
<body>
<h1>学java</h1>
<h1>学java</h1>
<p>练车</p>
</body>
</html>

  3. 类选择器 class

  4. <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>类选择器</title>
    <style>
        /*类选择器  .class名称
        可以多个标签归类，可以复用 */
        .t1 {
            color: #4c6dc6;
        }
        .t2{
            color: #6bc633;
        }
    </style>
</head>
<body>
<h1 class="t1">你好</h1>
<h1 class="t2">你好</h1>
<h1 class="t1">你好</h1>
</body>
</html>

  5. id选择器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>id选择器</title>
    <style>
        /*
        id选择器
        #+id名称{}
        id全局为1
        这里不遵从就近原则
        id选择器>类选择器>标签选择器
        */
        #id1{
            color: #ff634c;
        }
        .o2{
            color: #1b3cff;
        }
        h1{
            color: aqua;
        }
    </style>
</head>
<body>
<h1 id="id1"class="o2">标题1</h1>
<!--<h1 id="id1">标题2</h1>  多个元素不可以同一个id-->
<h1 class="o2">标题3</h1>
<h1 class="o2">标题4</h1>
<h1>标题5</h1>
<h1>标题6</h1>
</body>
</html>

优先级：id>类>标签

2.2层次选择器

  1. 后代选择器：在某个元素的后面 祖父 爷爷 爸爸 我
  2. 子选择器 一代，儿子
  3. 相邻兄弟选择器 下面相邻的一个 选择
  4. 通用选择器 当前选择，的下面所有兄弟类选择
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>层次选择器</title>
    <style>
        body p{
            background: wheat;
        }
        body>p{
            background: #4c6dc6;
        }
        .t1 + p{
            background: red;
        }
        .t1~p{
           background: aqua;
        }
    </style>
</head>
<body>
<p>1</p>
<p class="t1">2</p>
<p>3</p>
<ul>
    <li><p>4</p></li>
    <li><p>5</p></li>
    <li><p>6</p></li>

</ul>
<p>7</p>
</body>
</html>

2.3结构伪类选择器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>结构伪类选择器</title>
    <style>
        /*选择ul的第一个元素*/
        ul li:first-child{
            background: #6bc633;
        }
        /*选择ul的最后一个元素*/
        ul li:last-child{
            background: red;
        }
        /*body p:first-child{*/
        /*    background: aqua;*/
        /*}*/
        p:nth-child(2){/*选择父类的子类里第一个元素，如果不是当前选择的元素类就会不显示效果*/
            /*background: blue;*/
        }
        p:nth-of-type(1){/*选择父类的子类面p类里的第一个元素*/
            background: violet;
        }


    </style>
</head>
<body>
<h1>iii</h1>
<p>p1</p>
<p>p2</p>
<p>p3</p>
<ul>
    <li>1</li>
    <li>2</li>
    <li>3</li>
</ul>
</body>
</html>

2.4属性选择器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>属性选择器</title>
    <style>
        .demo a{
            float: left;/*浮动 向左*/
            display: block;/*变成块级元素*/
            background: violet;
            width: 50px;
            height: 50px;
            border-radius: 10px;/*圆角*/
            text-align: center;
            color: gainsboro;
            text-decoration: none;
            margin-right: 5px;
             font: bold 20px/50px Arial;

            }
        a[id=first]{
            background: yellow;

        }
        a[class*=first]{/*表示选择包含first的*/
            background: #ff634c;
        }
        a[href^=i]{/*选择以什么开头*/
            background: black;
        }
        a[href$=png]{/*选择以什么结尾i*/
            background: blueviolet;
        }
    </style>
</head>
<body class="demo">
<a href="http://www.baidu.com"class="links first">1</a>
<a href=""class="links world"target="_blank"title="i love you">2</a>
<a href="image/123.html"class="world first">3</a>
<a href="mage/123.png">4</a>
<a href="image/123.jpg">5</a>
<a href="image/123.pdf">6</a>
<a href=""id="first">7</a>
<a href="">8</a>
<a href="">9</a>
<a href="">10</a>
</body>
</html>

3、美化网页元素

3.1字体样式

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>字体样式学习</title>
    <style>
        span{
            font-size: 50px;
        }
        body{
            font-family:"Arial Black",楷体;/*修改字体  可以添加两种一个英文字体*/
            color: #232020;

        }
        h1{
            font-size: 50px;
        }
        .p1{
            font-weight: bolder;/*文字粗细*/
        }
        a{/*字体风格  字体粗细  字体大小  字体*/
            font: oblique bolder 12px "楷体";
        }
    </style>
</head>
<body>
关键字突出使用 <span>span</span>
<h1>摘要：</h1>
<p class="p1">鱼孩子有一个五颜六色的补丁口袋。这个大口袋是他用捡回的各种塑料，由细软的绿水草缝制而成的，上面还贴着五彩的贝壳。其他小鱼儿都说它像个垃圾箱
</p>
<p>鱼孩子有一个五颜六色的补丁口袋。</p>
<p>这个大口袋是他用捡回的各种塑料，由细软的绿水草缝制而成的，上面还贴着五彩的贝壳。其他小鱼儿都说它像个垃圾箱，鱼孩子说它是个万宝箱，能装许多宝贝。</p>
<p>When I wake up in the morning，

    　　You are all I see;

    　　When I think about you，

    　　And how happy you make me。

    　　You're everything I wanted;

    　　You're everything I need;

    　　I look at you and know;

    　　That you are all to me。

    　　Barry Fitzpatrick</p>
<a href="">鱼孩子有一个五颜六色的补丁口袋。</a>
</body>
</html>

3.2文本样式

  1. 颜色
  2. 文本对齐方式
  3. 首行缩进
  4. 行高
  5. 装饰
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        p{
            color: rgba(0,252,334,0.9);/*单词 RGB 0~F RGBA 带透明度*/
        }
        h1{
            text-align: center;/*居中排版*/
        }
        .c1{
            text-indent: 2em;/*首行缩进*/
        }
        .c2{
            background: #ff634c;
            height: 300px;/* 行高*/
            line-height: 300px;
        }
        .l1{
            text-decoration: underline;/*下划线*/
        }
        .l2{
            text-decoration: line-through;/*中划线*/
        }
        .l3{
            text-decoration: overline;/*上划线*/
        }
        img,span{
            vertical-align: middle;/*实现文字在图片的中间*/
        }
    </style>
</head>
<body>
　
<img src="image/a..png" alt="askdfaj"><span>asdjfkvsn</span>
<p class="l1">You are all I see;</p>
<p class="l2">When I think about you，</p>
<p class="l3">And how happy you make me。</p>


    <h1>摘要</h1>
    <p>鱼孩子有一个五颜六色的补丁口袋。</p>
    <p class="c1">鱼孩子有一个五颜六色的补丁口袋鱼孩子有一个五颜六色的补丁口袋鱼孩子有
        一个五颜六色的补丁口袋鱼孩子有一个五颜六色的补丁口袋鱼孩子有一个五颜六色的补丁口袋鱼孩子有一个五颜六色的补丁口袋。</p>
    <p class="c2">When I wake up in the morning，

        　　You are all I see;

        　　When I think about you，

        　　And how happy you make me。

        　　You're everything I wanted;

        　　You're everything I need;

        　　I look at you and know;

        　　That you are all to me。

        　　Barry Fitzpatrick</p>
</body>
</html>

3.3超链接伪类

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>超链接伪类</title>
    <style>
        a{
            text-decoration: none;
            color: black;
        }
        a:hover{/*鼠标悬停的颜色*/
            color: blueviolet;
        }
        a:active{/*鼠标按住未释放的时候*/
            color: chartreuse;
        }

        p{
            border-radius: 20px;
            background:red;
            width: 60px;
            /*text-shadow: burlywood 10px 5px 0px;   阴影*/

        }
    </style>
</head>
<body>
<a href="#"><img src="image/a..png" alt="图片"title="选择浏览器"></a>
<br/>
<a href="#">不同的浏览器</a>
<p>
    ￥999
</p>
</body>
</html>

3.4列表

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>全部商品分类</title>
    <link rel="stylesheet" href="css/style.css">
</head>
<body>
<div>
    <h1>全部商品分类</h1>

    <ul>
        <li><a href="#">图书</a>&nbsp;&nbsp;<a href="#">音像</a>&nbsp;&nbsp;<a href="#">数字商品</a></li>
        <li><a href="#">图书</a>&nbsp;&nbsp;<a href="#">音像</a>&nbsp;&nbsp;<a href="#">数字商品</a></li>
        <li><a href="#">图书</a>&nbsp;&nbsp;<a href="#">音像</a>&nbsp;&nbsp;<a href="#">数字商品</a></li>
        <li><a href="#">图书</a>&nbsp;&nbsp;<a href="#">音像</a>&nbsp;&nbsp;<a href="#">数字商品</a></li>
    </ul>

</div>

</body>
</html>

div{
    width: 260px;
    background:#c6c5c7 ;
}
h1{
    font-size: 18px;
    font-weight: bold;
    text-indent: 3em;
    line-height: 35px;
    background: red;
}
  a{
    color: black;
    text-decoration: none;

}
  a:hover{
      color: #166307;
      text-decoration: underline;
  }
 ul li{
     list-style: none;/*none 无 ；circle 空心圆；decimal数字；square正方形；*/
     height: 30px;
     text-indent: 1em;
 }
 ul{
     background: #c6c5c7;
 }

设置背景

background: red  url("../image/b.png") 235px 14px no-repeat ;

3.5背景

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        div{
            width: 1000px;
            height: 800px;
            border: red 1px solid/*实线*/;
            background-image: url("images/1.png");
        }
        .d1{
            background-repeat: repeat-x;/*水平平铺*/
        }
        .d2{
            background-repeat: repeat-y;/*垂直平铺*/
        }
        .d3{
            background-repeat: no-repeat;/*不平铺*/
        }
    </style>
</head>
<body>
<div class="d1"></div>
<div class="d2"></div>
<div class="d3"></div>
</body>
</html>

3.6渐变

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-hCHPkZOM-1614495481006)(C:\Users\lcj\AppData\Roaming\Typora\typora-user-images\image-20210222222632292.png)]

background-image: linear-gradient(19deg,#21D4FD 0%,#B721FF 100%);
yuanlcj
关注
Day 3:CSS选择器查找元素
LSMSMD0526的博客
07-21 3138
CSS选择器查找元素一、哪些情况不能用ID选择器二、CSS选择器语法三、ID选择器查找元素四、class选择器查找元素五、通配符定位六、查找子节点 一、哪些情况不能用ID选择器 元素的ID不唯一，或者ID是动态变化的 name以及linktext属性值不唯一 如果满足上述条件，则不能用ID选择器来定位元素，就需要依靠xpath或CSS来定位元素了 PS：不管使用什么方式来查找元素（比如id、name、xpath、CSS等），都需要确保页面上查找出来的元素的唯一性，应该只找到一个匹配的node（如何查看是
day05（CSS03-盒子模型）v1.0.pdf
02-17
"CSS盒子模型和三大特性" CSS盒子模型是一个基本的布局模型，它由内容区域、边框区域、内边距区域和外边距区域组成。在这个模型中，每个标签都是一个盒子，通过盒子的视角可以更方便地进行布局。 一、CSS三大特性 ...
DAY05 CSS
adminstate的博客
07-20 1162
CSS样式
css学习day04
2201_75646248的博客
06-17 2045
属性作用。
css学习day05
2201_75646248的博客
06-18 1986
margin属性用于设置外边距。设置外边距会在元素之间创建“空白”， 这段空白通常不能放置其他内容。margin-top:上外边距margin-right:右外边距margin-bottom:下外边距margin-left:上外边距margin:上外边距 右外边距 下外边距 左外边取值顺序跟内边距相同。
CSS Day04
gxh0816的博客
06-12 1833
text-decoration用于设置。
CSS高级 DAY2
qq_46274219的博客
12-19 834
学习记录
DAY04 HTML&CSS
adminstate的博客
06-17 1021
HTML&CSS
day05-css属性
user_lc的博客
10-17 267
css属性
css3学习day03
2201_75646248的博客
06-14 1562
复合选择器 标签显示模式 背景样式
CSS day01 定义和导入
dsj20031028的博客
08-03 435
css文件路径，建议和需要导入html文件处于同一级或专门创一个文件架存放，方便寻找。
day2纯CSS 时钟_纯CSS时钟_
10-04
在本项目中，我们主要探讨的是如何使用纯CSS来创建一个动态显示时间的时钟。这个练习对于理解和掌握原生JavaScript以及HTML和CSS的交互是非常有益的。下面将详细讲解这个过程中涉及的关键知识点。 首先，我们需要...
Day03-css基础
06-29
Day03的资源，自用啦啦啦啦啦啦啦啦啦啦爱啦啦啦啦啦啦啦啦啦啦啦啦奥啦绿绿绿绿啦啦啦啦啦啦了了了了了啦啦了了了啦啦啦啦啦啦啦啦啦啦啦阿拉啦啦啦阿拉啦啦阿拉蕾拉阿拉啦啦啦拉拉阿拉啦啦啦啦啦啦啦啦啦阿拉...
day02_CSS预习笔记1
08-03
【CSS预习笔记1】- CSS基础与应用 在网页设计中，CSS（Cascading Style Sheets）扮演着至关重要的角色，它负责控制网页的样式和布局，使内容与表现分离，让页面更加美观和易读。这篇笔记将详细介绍CSS的基础知识，...
day03（CSS01-基础选择器+字体文本样式）.rar
12-01
本压缩包“day03（CSS01-基础选择器+字体文本样式）.rar”显然是一个关于CSS学习资源的集合，主要涵盖了基础选择器和字体文本样式的概念与应用。下面我们将深入探讨这两个关键知识点。 **一、基础选择器** 1. **...
家政服务管理平台 源码+数据库+论文（JAVA+SpringBoot+Vue.JS+MySQL）.zip
10-02
家政服务管理平台 源码+数据库+论文（JAVA+SpringBoot+Vue.JS+MySQL） 启动教程：https://www.bilibili.com/video/BV11ktveuE2d
基于SpringBoot和Bootstrap的Kettle 8.3任务调度系统设计源码
10-02
该项目是一款基于SpringBoot和Bootstrap框架构建的Kettle 8.3任务调度系统源码，包含675个文件，涵盖256个JavaScript文件、198个Java源文件、51个PNG图片文件、34个CSS文件、31个HTML文件、30个GIF文件、11个JPG文件、9个XML文件、7个YML文件、7个TXT文件。系统后端利用SpringBoot框架实现，前端界面采用Bootstrap设计，同时借鉴了zhaxiaodong9860的代码并进行优化，提供便捷的页面管理功能。后台代码基于Kettle 8.3 API进行工具化编写，旨在提升使用效率。
实例程序原理图加文档MSP430单片机51单片机室内环境检测仪
10-02
实例程序原理图加文档MSP430单片机51单片机室内环境检测仪
鲁东大学在江西2020-2024各专业最低录取分数及位次表.pdf
最新发布
10-02
那些年，与你同分同位次的同学都去了哪里？全国各大学在江西2020-2024年各专业最低录取分数及录取位次数据，高考志愿必备参考数据
前端入门：HTML+CSS 学习笔记 Day01
"HTML和CSS是前端开发的基础，本笔记主要涵盖了HTML+CSS的学习目标、前端历史、网页组成、网页规范以及浏览器的介绍。" 在HTML和CSS的学习中，首先需要理解HTML（HyperText Markup Language）的基本概念。HTML是一...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值