CSS学习小结

最新推荐文章于 2022-07-09 09:35:39 发布
最新推荐文章于 2022-07-09 09:35:39 发布
阅读量155 收藏
点赞数
分类专栏： 前端 2021
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_43553062/article/details/113647235
版权

一、CSS简介

1.CSS：cascading style sheet，层叠级联样式表。涉及字体、颜色、边距、高度、宽度、背景图片、网页定位、网页浮动等设计。样式通常保存在外部的 .css 文件中，只需编辑简单的 CSS 文档即可改变所有页面的布局和外观。 

2.发展史

  • css1.0
  • css2.0：div+css，html与css结构分离，SEO
  • css2.1：浮动、定位
  • css3.0：圆角、边框、阴影、动画…… 浏览器兼容性

3.css导入方式

  • 行内样式
  • 内部样式
  • 外部样式

index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <!--内部样式-->
    <style>
        h1{
            color: aqua;
        }
    </style>

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

</head>
<body>

<!--行内样式：在标签中，编写style属性-->
<h1 style="color: red">标题</h1>

</body>
</html>

style.css

/*外部样式*/
h1{
    color: chartreuse;
}

/*优先级：采取就近原则，行内样式 \ 内部样式 \ 外部样式*/

 二、CSS选择器

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

2.基本选择器

  • 标签选择器 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <style>
        /*标签选择器会选择所有的该标签*/
        h1{
            color: #aa1133;
        }
        p{
            font-size: 80px;
        }
    </style>

</head>
<body>

<h1>二月</h1>
<h1>二月</h1>
<p>四日</p>

</body>
</html>
  • 类选择器
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <style>
        /*类选择器的格式 .class的名称{}*/
        .june{
            color: blueviolet;
        }
        .bw{
            color: chartreuse;
        }
    </style>

</head>
<body>

<h1 class="june">one</h1>
<h1 class="bw">two</h1>
<h1 class="june">three</h1>

</body>
</html>
  • id选择器
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <style>
        /*id选择器的格式 #id名称{} id保证全局唯一*/
        #bw{
            color: blueviolet;
        }
        #june{
            color: chartreuse;
        }
        h1{
            color: darksalmon;
        }
    </style>

</head>
<body>

<h1 id="june">one</h1>
<h1 id="bw">two</h1>
<h1>three</h1>
<h1>four</h1>

</body>
</html>

3.高级选择器

  • 层次选择器：后代选择器、子选择器、相邻兄弟选择器、通用兄弟选择器
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        /*后代选择器:某个元素之后*/
        ul p{
            background: #aa1133;
        }
        /*子选择器：只有后面一代*/
        body>p{
            background: chartreuse;
        }
        /*相邻兄弟选择器:相邻向下的一个元素*/
        .active+p{
            background: coral;
        }
        /*通用兄弟选择器:当前元素向下的所有元素*/
        .active~p{
            background: blueviolet;
        }
    </style>
</head>
<body>

<p>p1</p>
<p class="active">p2</p>
<p>p3</p>
<ul>
    <li>
        <p>p4</p>
    </li>
    <li>
        <p>p5</p>
    </li>
    <li>
        <p>p6</p>
    </li>
</ul>
<p>p7</p>
<p>p8</p>

</body>
</html>
  • 结构伪类选择器
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <!--避免使用id、class选择器-->
    <style>
        /*ul的第一个子元素*/
        ul li:first-child{
            background: blueviolet;
        }
        /*ul的第一个子元素*/
        ul li:last-child{
            background: chartreuse;
        }
        /*选中P3:定位到父元素，选择当前第n个元素*/
        p:nth-of-type(3){
            background: red;
        }
    </style>

</head>
<body>

<p>p1</p>
<p>p2</p>
<p>p3</p>
<ul>
    <li>li1</li>
    <li>li2</li>
    <li>li3</li>
</ul>

</body>
</html>
  • 属性选择器
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <style>
        .demo a{
            float: left;
            display: block;
            height: 50px;
            width: 50px;
            border-radius: 10px;
            background: blue;
            text-align: center;
            color: grey;
            text-decoration: none;
            margin-right: 5px;
            font: bold 20px/50px Arial;
        }
        /*存在id属性的元素 a[]{}*/
        a[id]{
            background: coral;
        }
        /*
        =绝对等于 *=通配，包含该元素
        ^=以该元素开头，$=以该元素结尾
        */
        a[class*="links"]{
            background: aqua;
        }
    </style>

</head>
<body>

<p class="demo">
    <a href="http://www.baidu.com" class="links item first" id="first">1</a>
    <a href="" class="links item active" target="_blank" title="text">2</a>
    <a href="images/123.html" class="links item">3</a>
    <a href="images/123.png" class="links item">4</a>
    <a href="images/123.jpg" class="links item">5</a>
    <a href="abc" class="links item">6</a>
    <a href="/a.pdf" class="links item">7</a>
    <a href="/abc.pdf" class="links item">8</a>
    <a href="abc.doc" class="links item">9</a>
    <a href="abcd.doc" class="links item last">10</a>
</p>

</body>
</html>

三、字体样式

1.span

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <style>
        #title1{
            font-size: 50px;
        }
    </style>

</head>
<body>

<!--span:重点要突出的字，用span包裹起来-->
欢迎学习 <span id="title1">Java</span>

</body>
</html>

2.字体样式

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    /*
    font-family:字体
    font-size:大小
    font-weight：粗细
    color：颜色
    */
    <style>
        body{
            font-family: 微软雅黑;
        }
        h1{
            font-size: 50px;
        }
        .p1{
            font-weight: bold;
            color: #678000;
        }
    </style>

</head>
<body>

<h1>内容简介</h1>
<p class="p1">故事写的是东京一位名叫岛村的舞蹈艺术研究家，三次前往雪国的温泉旅馆，与当地一位名叫驹子的艺妓、一位萍水相逢的少女叶子之间发生的感情纠葛：岛村是一个有着妻室儿女的中年男子，坐食遗产，无所事事，偶尔通过照片和文字资料研究、评论西洋舞蹈。他来到雪国的温泉旅馆，邂逅了艺妓驹子，并被她的清丽和单纯所吸引，甚至觉得她的“每个脚趾弯处都是很干净的”，后来又两度到雪国和驹子相会。</p>
<p>小说就是从岛村第二次来雪国开始的。驹子的三弦琴师傅的儿子行男患了肺结核，叶子陪同他从东京乘火车返回汤泽，正好坐在第二次去会驹子的岛村对面。岛村透过车窗欣赏黄昏的雪景，却看到映现在车窗上的美丽的叶子，不禁喜欢上了这个美少女。因而在他和驹子、叶子之间，构成了一种微妙的情感关系。小说最终以叶子的意外去世而告终。</p>

</body>
</html>

3.文本样式

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <!--
    text-align:排版，一般选居中
    text-indent:段落首行缩进
    height:块高
    line-height:行高
    当行高和块高一致，就能上下居中
    -->
    <style>
        h1{
            color: #aa1133;
            text-align: center;
        }
        .p1{
            text-indent: 2em;
        }
        .p2{
            background: #00ff45;
            height: 300px;
            line-height: 50px;
        }
        .l1{
            text-decoration: underline;
        }
        .l2{
            text-decoration: line-through;
        }
        .l3{
            text-decoration: overline;
        }
        /*a标签去除下划线*/
        a{
            text-decoration: none;
        }
    </style>

</head>
<body>

<p class="l1">123456789</p>
<p class="l2">123456789</p>
<p class="l3">123456789</p>

<h1>内容简介</h1>
<p class="p1">故事写的是东京一位名叫岛村的舞蹈艺术研究家，三次前往雪国的温泉旅馆，与当地一位名叫驹子的艺妓、一位萍水相逢的少女叶子之间发生的感情纠葛：岛村是一个有着妻室儿女的中年男子，坐食遗产，无所事事，偶尔通过照片和文字资料研究、评论西洋舞蹈。他来到雪国的温泉旅馆，邂逅了艺妓驹子，并被她的清丽和单纯所吸引，甚至觉得她的“每个脚趾弯处都是很干净的”，后来又两度到雪国和驹子相会。</p>
<p class="p2">小说就是从岛村第二次来雪国开始的。驹子的三弦琴师傅的儿子行男患了肺结核，叶子陪同他从东京乘火车返回汤泽，正好坐在第二次去会驹子的岛村对面。岛村透过车窗欣赏黄昏的雪景，却看到映现在车窗上的美丽的叶子，不禁喜欢上了这个美少女。因而在他和驹子、叶子之间，构成了一种微妙的情感关系。小说最终以叶子的意外去世而告终。</p>

<a href="http://www.baidu.com"></a>

</body>
</html>

四、列表样式

  • 无序列表 ul - 列表项标记用特殊图形（如小黑点、小方框等）
  • 有序列表 ol - 列表项的标记有数字或字母

index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>列表样式</title>
    <link href="css/style.css" rel="stylesheet" type="text/css" />
</head>
<body>

<div id="nav">
    <h1 class="title">全部商品分类</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></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></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></li>
        <li><a href="#">彩票</a>&nbsp;&nbsp;<a href="#">旅行</a>&nbsp;&nbsp;<a href="#">充值</a>&nbsp;&nbsp;<a href="#">票务</a></li>
    </ul>
</div>

</body>
</html>

style.css

#nav{
    width: 300px;
    background: #a0a0a0;
}
.title{
    font-size: 18px;
    font-weight: bold;
    text-indent: 1em;
    line-height: 35px;
    background: #ff0000;
}
ul{
    background: #a0a0a0;
}
/*
list-style:
    none:去掉圆点
    circle:空心圆
    decimal:数字
    square:正方形
*/
ul li{
    height: 30px;
    list-style: none;
    text-indent: 1em;
}
a{
    text-decoration: none;
    font-size: 14px;
    color:#000000;
}
a.hover{
    color: orange;
    text-decoration: underline;
}

五、定位

  • 默认情况
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <style>
        div{
            margin: 10px;
            padding: 5px;
            font-size: 12px;
            line-height: 25px;
        }
        #father{
            border: 1px solid #666666;
            padding: 0;
        }
        #first{
            background-color: #ff0055;
            border: 1px solid #ff0000;
        }
        #second{
            background-color: #ff9955;
            border: 1px solid #ff990e;
        }
        #third{
            background-color: #f4fc55;
            border: 1px solid #f4fc36;
        }
    </style>

</head>
<body>

<div id="father">
    <div id="first">第一个盒子</div>
    <div id="second">第二个盒子</div>
    <div id="third">第三个盒子</div>
</div>

</body>
</html>
  • 相对定位
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <!--相对定位：相对于自己原来的位置进行偏移
            移动之前的位置仍会保留下来
    -->
    <style>
        div{
            margin: 10px;
            padding: 5px;
            font-size: 12px;
            line-height: 25px;
        }
        #father{
            border: 1px solid #666666;
            padding: 0;
        }
        #first{
            background-color: #ff0055;
            border: 1px solid #ff0000;
            position: relative;/*相对定位*/
            top: -20px;
            left: 20px;
        }
        #second{
            background-color: #ff9955;
            border: 1px solid #ff990e;
        }
        #third{
            background-color: #f4fc55;
            border: 1px solid #f4fc36;
            position: relative;/*相对定位*/
            right: 20px;
            bottom: -20px;
        }
    </style>

</head>
<body>

<div id="father">
    <div id="first">第一个盒子</div>
    <div id="second">第二个盒子</div>
    <div id="third">第三个盒子</div>
</div>

</body>
</html>
  • 绝对定位
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <!--绝对定位：移动之前的位置不会被保留
            1.没有父级元素的情况下，相对于浏览器行为
            2.假设父级元素存在定位，则相对于父级元素进行偏移
            3.在父级元素范围内移动
    -->
    <style>
        div{
            margin: 10px;
            padding: 5px;
            font-size: 12px;
            line-height: 25px;
        }
        #father{
            border: 1px solid #666666;
            padding: 0;
        }
        #first{
            background-color: #ff0055;
            border: 1px solid #ff0000;
        }
        #second{
            background-color: #ff9955;
            border: 1px solid #ff990e;
            position: absolute;
        }
        #third{
            background-color: #f4fc55;
            border: 1px solid #f4fc36;
        }
    </style>

</head>
<body>

<div id="father">
    <div id="first">第一个盒子</div>
    <div id="second">第二个盒子</div>
    <div id="third">第三个盒子</div>
</div>

</body>
</html>
  • 固定定位
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <style>
        body{
            height: 1000px;
        }
        div:nth-of-type(1){ /*绝对定位：相对于浏览器*/
            width: 100px;
            height: 100px;
            background-color: red;
            position: absolute;
            right: 0;
            bottom: 0;
        }
        div:nth-of-type(2){ /*固定定位*/
            width: 50px;
            height: 50px;
            background-color: yellow;
            position: fixed;
            right: 0;
            bottom: 0;
        }
    </style>

</head>
<body>

<div>div1</div>
<div>div2</div>

</body>
</html>

 

撷思、
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
前端开发--css--background属性--练习题
sundanping_123的博客
07-10 411
1
HTML&CSS学习总结
m0_57872839的博客
07-09 390
html，css新手入门
HTML基础-基本标签、文本
weixin_44790446的博客
09-23 303
一.HTML结构 <!DOCTYPE html> //文档声明 <html>//HTML文档 <head>//页头 </head> <body>//页身 </body> </html> 1.head标签 在HTML中，一般来说，只有6个标签放在head标签内。title标签、meta标签、link标签、style标签、script标签、base标签 &lt
前端基础 CSS 第十二章 Web标准与CSS网页布局实例 ----暑假学习第十三天
树叶子的博客
07-19 920
第12章 Web标准与CSS网页布局实例 12.1 Web标准与CSS布局 web标准是网站开发中一系列标准的集合，包括XHTML、XML、CSS、DOM和ECMAScript等。制定这些标准是为了便于维护，代码更加简洁，降低带宽的运行成本，更容易被搜索引擎搜索到、改版方便、不需要变动页面内容、提高网站易用性等 12.1.1 什么是web标准        web标准是由W3C和其他标准化...
CSS：background-color
摄氏0℃の水的专栏
01-19 1383
ActiveBorder<br />ActiveCaption<br />ActiveCaptionText<br />AppWorkspace<br />Control<br />ControlDark<br />ControlDarkDark<br />ControlLight<br />ControlLightLight<br />ControlText<br />Desktop<br />GrayText<br />Highlight<br />HighlightText<br />HotTrack
CSS啊嗯，前端学习小结（a4-a6）
wafer_biscuit的博客
02-16 224
a4 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <style> video{
CSS学习总结
qq_58174923的博客
07-09 535
对CSS的学习总结
css学习总结
XiaoduDadu的博客
07-08 569
css学习总结
HTML&CSS 学习总结
Stephen的博客
07-09 254
以下是一个完整的html页面的结构： 可以发现每个结构都是由内容构成。例如上图中h1为一个标题，p是一个段落。 总而言之，HTML 是一种在 Web 上使用的通用标记语言。HTML 允许你格式化文本，添加图片，创建链接、输入表单、框架和表格等等，并可将之存为文本文件，浏览器即可读取和显示。 HTML 的关键是标签，其作用是指示将出现的内容。要想学习HTML的各种标签可以参考以下网站：菜鸟驿站在HTML中，我们可以设计网页上的内容，但是缺无法让页面展示的更好看（HTML的页面默认为浏览器的...
HTML与CSS学习总结
weixin_52686749的博客
07-06 1134
该文是本人学习html与css的记录，若有错误，请指出，万分感谢！！！
nginx-1.24.0.tar
09-06
Nginx 1.24.0 是 Nginx 开源项目发布的一个重要更新版本，该版本在性能优化、功能增强以及安全性提升方面带来了诸多改进。当您下载 Nginx 1.24.0 的压缩包时，您将获得一个包含 Nginx 源代码的压缩文件，通常命名为 nginx-1.24.0.tar.gz（对于 GNU/Linux 和 macOS 系统）或类似的格式，具体取决于发布平台。 这个压缩包包含了编译 Nginx 服务器所需的所有源代码文件、配置文件模板（如 nginx.conf）、模块源码以及构建和安装说明。通过解压这个压缩包，您可以在支持 C 语言编译器的操作系统上编译并安装 Nginx 1.24.0。 Nginx 1.24.0 引入了一系列新特性和优化，可能包括但不限于对 HTTP/2 和 HTTP/3 协议的进一步支持、性能提升、新的模块或模块更新，以及对已知安全漏洞的修复。这使得 Nginx 能够在保持其作为高性能 HTTP 和反向代理服务器的声誉的同时，继续满足不断发展的网络需求。
智能化病虫害标注系统前端.zip
09-06
图像识别技术在病虫害检测中的应用是一个快速发展的领域，它结合了计算机视觉和机器学习算法来自动识别和分类植物上的病虫害。以下是这一技术的一些关键步骤和组成部分： 1. **数据收集**：首先需要收集大量的植物图像数据，这些数据包括健康植物的图像以及受不同病虫害影响的植物图像。 2. **图像预处理**：对收集到的图像进行处理，以提高后续分析的准确性。这可能包括调整亮度、对比度、去噪、裁剪、缩放等。 3. **特征提取**：从图像中提取有助于识别病虫害的特征。这些特征可能包括颜色、纹理、形状、边缘等。 4. **模型训练**：使用机器学习算法（如支持向量机、随机森林、卷积神经网络等）来训练模型。训练过程中，算法会学习如何根据提取的特征来识别不同的病虫害。 5. **模型验证和测试**：在独立的测试集上验证模型的性能，以确保其准确性和泛化能力。 6. **部署和应用**：将训练好的模型部署到实际的病虫害检测系统中，可以是移动应用、网页服务或集成到智能农业设备中。 7. **实时监测**：在实际应用中，系统可以实时接收植物图像，并快速给出病虫害的检测结果。 8. **持续学习**：随着时间的推移，系统可以不断学习新的病虫害样本，以提高其识别能力。 9. **用户界面**：为了方便用户使用，通常会有一个用户友好的界面，显示检测结果，并提供进一步的指导或建议。 这项技术的优势在于它可以快速、准确地识别出病虫害，甚至在早期阶段就能发现问题，从而及时采取措施。此外，它还可以减少对化学农药的依赖，支持可持续农业发展。随着技术的不断进步，图像识别在病虫害检测中的应用将越来越广泛。
Python 小游戏 （贪吃蛇、五子棋、扫雷、俄罗斯方块）
最新发布
09-06
python
MATLAB/simulink 电力系统之变压器仿真-变压器空载运行仿真，磁通饱和+励磁电流
09-06
MATLAB/simulink 电力系统之变压器仿真- 变压器空载运行仿真，磁通饱和+励磁电流
超级好的电赛习题分享.zip
09-06
电赛习题.zip
8051Proteus仿真c源码串口通讯计算器
09-06
8051Proteus仿真c源码串口通讯计算器提取方式是百度网盘分享地址
算法部署-基于ONNX+MNN+Cpp部署语音识别模型-附项目源码-优质项目实战.zip
09-06
算法部署_基于ONNX+MNN+Cpp部署语音识别模型_附项目源码_优质项目实战
全球与中国聚烯烃弹性体 （POE）市场现状及未来发展趋势（2024版）.docx
09-06
全球与中国聚烯烃弹性体 （POE）市场现状及未来发展趋势（2024版）.docx
CSS学习总结：掌握CSS样式规则和使用方式
CSS学习总结 CSS（Cascading Style Sheets），中文名为“层叠样式表”，是用于表现HTML或XML等文件式样的计算机语言。它可以对网页的布局、字体、颜色、背景和其他效果实现更加精确的控制。 1. CSS简介 CSS全称为...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值