归纳：

CSS 的概述

CSS 指层叠样式表 (Cascading Style Sheets) 样式定义如何显示 HTML 元素样式通常存储在样式表中把样式添加到 HTML 4.0 中，是为了解决内容与表现分离的问题外部样式表可以极大提高工作效率

外部样式表通常存储在 CSS 文件中多个样式定义可层叠为一。

CSS 解决了什么问题?

HTML 标签原本被设计为用于定义文档内容。通过使用 <h1>、<p>、<table> 这样的标签，HTML 的初衷是表达“这是标题”、“这是段落”、“这是表格”之类的信息。同时文档布局由浏览器来完成，而不使用任何的格式化标签。

由于两种主要的浏览器（Netscape 和 Internet Explorer）不断地将新的 HTML 标签和属性（比如字体标签和颜色属性）添加到 HTML 规范中，创建文档内容清晰地独立于文档表现层的站点变得越来越困难。

为了解决这个问题，万维网联盟（W3C），这个非营利的标准化联盟，肩负起了 HTML 标准化的使命，并在 HTML 4.0 之外创造出样式（Style）。

所有的主流浏览器均支持层叠样式表。样式表极大地提高了工作效率

样式表定义如何显示 HTML 元素，就像 HTML 3.2 的字体标签和颜色属性所起的作用那样。样式通常保存在外部的 .css 文件中。通过仅仅编辑一个简单的 CSS 文档，外部样式表使你有能力同时改变站点中所有页面的布局和外观。

由于允许同时控制多重页面的样式和布局，CSS 可以称得上 WEB 设计领域的一个突破。作为网站开发者，你能够为每个 HTML 元素定义样式，并将之应用于你希望的任意多的页面中。如需进行全局的更新，只需简单地改变样式，然后网站中的所有元素均会自动地更新。

CSS 的基础语言以及页面引用

CSS 的基本语法

Css 的定义方法是: 选择器 { 属性: 值 ; 属性: 值;}

选择器是将样式和页面元素关联起来的名称，属性是希望设置的样式属性每个属性有一个或多个值。代码示例：

div{ width:100px; height:100px; color:red }

Css 页面引入的方法：

1．行内样式/内联样式：通过标签的 style 属性，在标签上直接写样式。

<div style="width:100px; height:100px; color:red "> </div>

2．内嵌样式：

通过 style 标签在网页上创建嵌入的样式。

<style type="text/css">
div{ width:100px; height:100px; color:red }
......
</style>

3．外联样式：

通过 link 标签，链接到外部样式表到页面中。

<link rel="stylesheet"  type="text/css" href="css/main.css">

Css文本及字体、链接、背景

Css文本及字体设计

常用的应用文本的css样式：

Ø color 设置文字的颜色，如： color:red;

Ø font-size 设置文字的大小，如：font-size:12px;

Ø font-family 设置文字的字体，如：font-family:'微软雅黑';

Ø font-style 设置字体是否倾斜，如：font-style:'normal'; 设置不倾斜，font-style:'italic';设置文字倾斜

Ø font-weight 设置文字是否加粗，如：font-weight:bold; 设置加粗 font-weight:normal 设置不加粗

Ø font 同时设置文字的几个属性，写的顺序有兼容问题，建议按照如下顺序写： font：是否加粗字号/行高字体；如： font:normal 12px/36px '微软雅黑';

Ø line-height 设置文字的行高，如：line-height:24px;

Ø text-decoration 设置文字的下划线，如：text-decoration:none; 将文字下划线去掉

Ø text-indent 设置文字首行缩进，如：text-indent:24px; 设置文字首行缩进24px

Ø text-align 设置文字水平对齐方式，如text-align:center 设置文字水平居中

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title></title><style type="text/css">.continer{width: 300px;height: 300px;/*设置边框*/border: 1px solid red;/*设置文本*//*font: normal 20px/30px "仿宋";*/font-family: "仿宋";font-size: 20px;/*设置字体是否加粗*/font-weight: normal;/*设置行高(每一行的高度都为50px)*//*line-height: 50px;*//*如果只有一行内容,则可设置垂直居中 显示 且高度和元素高度一致*//*line-height: 300px;*//*设置元素水平居中显示*//*text-align: center;*//*设置文本颜色*/color: orange;/*设置文本缩进*//*text-indent: 50px;*/}a{/*设置文本的上下划线是否显示  以下设置不显示*/text-decoration: none;}</style></head><body><div class="continer">学的不仅是技术更是<a href="#">梦想</a>,在牛逼的梦想也抵不住你傻逼似的坚持.</div></body>
</html>

背景设计

属性解释： background属性是css中应用比较多，且比较重要的一个属性，它是负责给盒子设置背景图片和背景颜色的，background是一个复合属性，它可以分解成如下几个设置项：

Ø background-color 设置背景颜色

Ø background-image 设置背景图片地址

Ø background-repeat 设置背景图片如何重复平铺

Ø background-position 设置背景图片的位置

Ø background-attachment 设置背景图片是固定还是随着页面滚动条滚动

实际应用中，我们可以用background属性将上面所有的设置项放在一起，而且也建议这么做，这样做性能更高，而且兼容性更好，比如：“background: #00FF00 url(bgimage.gif) no-repeat left center fixed”，这里面的“#00ff00”是设置background-color；“url(bgimage.gif)”是设置background-image；“no-repeat”是设置background-repeat；“left center”是设置background-position；“fixed”是设置background-attachment，各个设置项用空格隔开，有的设置项不写也是可以的，它会使用默认值。

实例代码_02

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title>实例代码_02</title><style type="text/css">.continer{width: 1000px;height: 600px;border: 2px solid black;/*1、“background:url(bg.jpg)”，默认设置一个图片地址，图片会从盒子的左上角开始将盒子铺满。*//*background: url(../img/logo1.png);*//*2、“background:cyan url(bg.jpg) repeat-x”，横向平铺盒子，盒子其他部分显示背景颜色“cyan”。*//*background:cyan url(../img/logo1.png) repeat-x;*//*3、“background:cyan url(bg.jpg) repeat-y”，纵向平铺盒子，盒子其他部分显示背景颜色“cyan”。*//*background:cyan url(../img/logo1.png) repeat-y;*//*4、“background:cyan url(bg.jpg) no-repeat”，背景不重复，背景和盒子左上角对齐，盒子其他部分显示背景颜色“cyan”。*//*background:cyan url(../img/logo1.png) no-repeat;*//*5、“background:cyan url(bg.jpg) no-repeat left center”，背景不重复，背景和盒子左中对齐，盒子其他部分显示背景颜色“cyan”。*//*background:cyan url(../img/logo1.png) no-repeat left center;*//*6、“background:cyan url(bg.jpg) no-repeat right center”，背景不重复，背景和盒子右中对齐，也就是背景图片的右边对齐盒子的右边，盒子其他部分显示背景颜色“cyan”。*/background:cyan url(../img/logo1.png) no-repeat right center;}</style></head><body><div class="continer"></div></body>
</html>

CSS 选择器的介绍以及使用

标签选择器

标签选择器，此种选择器影响范围大，建议尽量应用在层级选择器中。

*{margin:0;padding:0} div{color:red}
<div>....</div> <!-- 对应以上两条样式 -->
<div class="box">....</div> <!-- 对应以上两条样式 -->

id 选择器

通过 id 名来选择元素，元素的 id 名称不能重复，所以一个样式设置项只能对应于页面上一个元素，不能复用，id 名一般给程序使用，所以不推荐使用 id作为选择器。

#box{color:red}
<div id="box">....</div>    <!-- 对应以上一条样式，其它元素不允许应用此样式 -->

类选择器

通过类名来选择元素，一个类可应用于多个元素，一个元素上也可以使用多个类，应用灵活，可复用，是 css 中应用最多的一种选择器。

.red{color:red}
.big{font-size:20px}
.mt10{margin-top:10px}
<div class="red">   </div>
<h1 class="red big mt10">   </h1>
<p class="red mt10">    </p>

层级选择器

主要应用在选择父元素下的子元素，或者子元素下面的子元素，可与标签元素结合使用，减少命名，同时也可以通过层级，防止命名冲突。

.box span{color:red}
.box .red{color:pink}
.red{color:red}
<div class="box">
<span>  </span>
<a href="#" class="red">    </a>
</div>
<h3 class="red">    </h3>

组选择器

多个选择器，如果有同样的样式设置，可以使用组选择器。

.box1,.box2,.box3{width:100px;height:100px}
.box1{background:red}
.box2{background:pink}
.box2{background:gold}
<div class="box1">  </div>
<div class="box2">  </div>
<div class="box3">  </div>

伪类及伪元素选择器

常用的伪类选择器有 hover，表示鼠标悬浮在元素上时的状态，伪元素选择器有 before 和 after,它们可以通过样式在元素中插入内容。

.box1:hover{color:red}
.box2:before{content:'行首文字';}
.box3:after{content:'行尾文字';}
<div class="box1">  </div>
<div class="box2">  </div>
<div class="box3">  </div>

拓展：

小练习：

实例-图片切换：

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title>
<!-- 		<script type="text/javascript" src="../js/jquery-3.4.1.js"></script><script type="text/javascript">$(function(){$(a).click();});</script> --><style type="text/css">/* 通配符取消所有元素的内外边距 */*{margin: 0;padding: 0;}/* 设置最外层大div的宽度和高度以及相对定位,方便它的子元素设置绝对定位. */.all{height: 450px;width: 700px;margin: 20px auto;position: relative;}/* 设置包裹图片div的大小以及超出大小内容隐藏*/.big{height: 450px;width: 700px;overflow: hidden;}/* 设置图片和div层大小一致 */.big img{height: 450px;width: 700px;}/* 设置包含按钮的列表大小和绝对定位样式 */.sm ul{height: 40px;list-style: none;position: absolute;right: 10px;bottom: 10px;}/* 设置列表内元素排成一行已经间距 */.sm li{float: left;margin-left: 20px;}/* 设置按钮a元素的样式和大小 */.sm a{height: 20px;width: 20px;background-color: #ffff00;border: pink 8px solid;border-radius: 50%;}/* 设置按钮a元素鼠标经过时变化的样式,方便识别点击过 */.sm a:hover{background-color: #aa557f;border: green 8px solid;border-radius: 50%;}/* 设置a元素可见 */.sm a{display: block;}</style></head><body><!-- 设置最外层大div层 --><div class="all"><!-- 设置包裹图片的div层 --><div class="big"><!-- 用img标签插入需要的图片 --><img id="a01" src="../img/猫1.jpg" ><img id="a02" src="../img/树叶.jpg" ><img id="a03" src="../img/猫2.jpg" ><img id="a04" src="../img/猫3.jpg" ><img id="a05" src="../苏宁官网项目/img/猪.gif" ></div><!-- 设置包裹按钮的div层 --><div class="sm"><!-- 选择无序列表做多个按钮排列效果 --><ul><li><!-- 使用a标签锚点链接对应图片，实现点击切换 --><a href="#a01"></a></li><li><a href="#a02"></a></li><li><a href="#a03"></a></li><li><a href="#a04"></a></li><li><a href="#a05"></a></li></ul></div></div></body>
</html>

实例-日历：

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title><style type="text/css">/* 设置元素默认内外边距为0*/*{margin: 0;padding: 0;}/* 设置ul元素内鼠标样式 */ul{cursor: pointer;}/* 设置日历内容的外层div样式 */.L{width: 538px;height: 370px;position: relative;left: 350px;top: 150px;}/* 设置日历数字样式 */.ul1{list-style: none;/* border: 1px solid red; */width: 390px;position: absolute;left: 10px;top: 90px;height: 280px;padding-left: 10px;}/* 设置星期数字的样式 */.ul2{list-style: none;position: absolute;left: 10px;top: 50px;border-right: none;border-left: none;border-bottom: none;padding-left: 10px;box-sizing: border-box;}/* 设置星期数字里列表的样式 */.ul2 li{float: left;width: 55px;height: 60px;/* margin-right: 15px */;box-sizing: border-box;border:1px solid #4169E1;border-left: none;border-right: none;border-bottom: none;}/* 设置日历表中数字里列表的样式 */.ul1 li{float: left;width: 55px;height: 55px;border: 1px solid #4169E1;box-sizing: border-box;border-bottom: none;border-right: none;border-left: none;}li{text-align: center;}.li2{color: red;}.li3{color: red;}/* 设置li隐藏边框,通过鼠标经过时触发 */li:hover{box-sizing: border-box;border: 5px solid #A1877A;width: 50px;height: 55px;}/* 设置li元素7的倍数减去1的数字为红色 */li:nth-child(7n-1){color: red;}.li4{color: red;}span{font-size: 13px;}</style></head><body><div class="L" style="background: url(../img/日历.jpg) no-repeat;"><ul class="ul2"><li>一</li><li>二</li><li>三</li><li>四</li><li>五</li><li>六</li><li class="li4">日</li></ul><ul class="ul1"><li>30<br><span>十九</span></li><li>1<br><span>艾滋病日</span></li><li>2<br><span>廿一</span></li><li>3<br><span>廿二</span></li><li>4<br><span>廿三</span></li><li class="li3">5<br><span>廿四</span></li><li class="li2">6<br><span>廿五</span></li><li>7<br><span>廿六</span></li><li>8<br><span>廿七</span></li><li>9<br><span>廿八</span></li><li>10<br><span>廿九</span></li><li>11<br><span>初一</span></li><li class="li3">12<br><span>初二</span></li><li class="li2">13<br><span>初三</span></li><li>14<br><span>初四</span></li><li>15<br><span>初五</span></li><li>16<br><span>初六</span></li><li>17<br><span>初七</span></li><li>18<br><span>初八</span></li><li class="li3">19<br><span>初九</span></li><li class="li2">20<br><span>初十</span></li><li>21<br><span>十一</span></li><li>22<br><span>十二</span></li><li>23<br><span>十三</span></li><li>24<br><span>十四</span></li><li>25<br><span>十五</span></li><li class="li3">26<br><span>十六</span></li><li class="li2">27<br><span>十七</span></li><li>28<br><span>十八</span></li><li>29<br><span>十九</span></li><li>30<br><span>廿十</span></li><li>31<br><span>廿一</span></li><li>1<br><span>元旦</span></li><li class="li3">2<br><span>廿二</span></li><li class="li2">3<br><span>廿三</span></li></ul></div></body>
</html>

查看全文
如若内容造成侵权/违法违规/事实不符，请联系编程学习网邮箱：809451989@qq.com进行投诉反馈，一经查实，立即删除！

《C++个人学习笔记》从堆栈中实例化对象以及访问对象成员
栈相当于装衣服的箱子，先放入的在最底下，后放入的在最上方，所以当取出数据时，采用的是先进后出的顺序，每次取出数据需要从最后一个放入的数据开始。堆相当于一个书架，也是采用一定的顺序存放数据&#xf…...
2024/5/9 13:46:32
透过技术社区看未来趋势
技术人员是行业创新的原动力，他们是最早掌握技术动态的那群人。为什么AI变得这么热门？大家看Gartner报告就会发现，很多热门技术最终都是昙花一现。什么技术才是真正的革命？其实我们可以透过开发者社区的动态来进行预测&#xff0c…...
2024/4/18 10:42:08
假如面试官问你java内部类是如何处理外部引用的，你该怎么回答？
在java内部类里，我们是能直接访问外部类的变量的。如下面例子所述： public class OutterClass {private String outterStr;class InnerClass{public void innerMethod(){System.out.printf(outterStr);}} }外部类OutterClass 的属性能够被InnerClass直接…...
2024/5/5 5:59:05
贝叶斯推断-要点整理
贝叶斯推断1 贝叶斯推断的介绍及公式2 先验概率分布的选择2.1共轭先验2.2无信息先验分布3 共轭先验公式推导（待补充）在上一篇文章中，我们提到了最大似然估计法来在已知样本的情况下求分布的参数。这一次整理一下贝叶斯推断。 1 贝叶斯推断的…...
2024/4/26 13:45:15
Conan建筑基本思路
建筑规划: 在观察柯南的建筑方式的时候，很容易能归纳出几个通用的规则： 1、占用；占用就是空间的占用，就像墙占用了某个竖直的面，护栏就不能再建造到这个竖直面，他两在配表里是有互斥关系的。再比如柱子就是…...
2024/4/26 1:36:41
学习制作交叉编译工具链参考(crosstool-ng)
交叉编译详解:https://www.crifan.com/files/doc/docbook/cross_compile/release/html/cross_compile.html#purpose crosstool-ng详解：https://www.crifan.com/files/doc/docbook/crosstool_ng/release/html/crosstool_ng.html crosstool-ng的基本使用流程&#x…...
2024/4/18 13:54:18
黑马探花交友----4.动态评论-FastDFS视频上传
学习目标： 圈子实现点赞、喜欢功能圈子实现评论圈子实现评论的点赞视频功能说明FastDFS环境搭建视频的功能实现1、动态评论点赞、喜欢、评论等均可理解为用户对动态的评论。点赞、取消点赞、喜欢、发布动态、删除动态等接口实现.... 完成效果如下，代…...
2024/4/20 6:20:47
Scala——if，while，for循环语句
if循环语句 if条件是否为真，如果为真，就执行对应的语句块，如果为假，就执行下一个条件分支。 scala> val x 6 x: Int 6scala> if (x>0) {println("This is a positive number")| } else {| println(&qu…...
2024/5/2 15:47:44
C时代有几十万开发者？
PC时代有几十万开发者，到互联网时代这个数字上升到了几百万。移动互联网时代，现在CSDN的注册会员是2600万，GitHub是3100万量，未来随着区块链、物联网、AI等技术的进一步发展，所有公司都会变成互联网公司，如…...
2024/4/7 14:32:43
是否完全二叉搜索树 (30分)
将一系列给定数字顺序插入一个初始为空的二叉搜索树（定义为左子树键值大，右子树键值小），你需要判断最后的树是否一棵完全二叉树，并且给出其层序遍历的结果。输入格式： 输入第一行给出一个不超过20的正整数…...
2024/4/18 10:45:45
Elsevier 投稿
Elsevier 投稿心得分享做了什么收获了什么做了什么发论文也是第一次发，完全没有什么经验。不过还好老师非常的耐心，在这个过程中给了很多帮助。第一次开始筹备论文的写作是在六月份，那个时候老师通知我问我想不想写review，我说…...
2024/4/19 9:14:41
Nginx 基础入门篇 .6
文章目录Nginx 访问限制ngx_http_limit_req_modulengx_http_limit_conn_moduleNginx 访问控制基于主机(ip) （ngx_http_access_module）基于用户(ngx_http_auth_basic_module)Nginx 访问限制 ngx_http_limit_req_module 网站请求测试未限制情况下的访问…...
2024/4/28 12:23:42
用Java实现代码字符画效果
算法及思路众所周知，我们的计算机在处理图形的时候，实际上是将图形分成N个像素点，对于每个像素点来说，有这个像素点自己的像素值。无数个带有自己特定的像素值的像素点才汇成了我们所见的图片。而在Java中，RGB值以及像…...
2024/5/3 15:06:26
数据库中的三级范式（1NF、2NF、3NF）
一级范式（1NF） 保证列的原子性什么是列的原子性呢？就是每一列的数据（字段值）是不可再分的比如说一个列名为address，value为“中国山东”，那么这就不满足1NF，因为“中国山东”可以再…...
2024/4/17 10:52:54
Callable and Future in Java（java中的Callable和Future）
需要Callable的理由通常，我们有两种方式创建线程，一种方式是继承Thread类，另外一种方式是实现Runnable接口。然而，Runnable方式缺少的一个特性就是，当线程终止的时候，即run运行完成的时候，我们…...
2024/4/28 0:08:31
glibc 2.12版本升级2.14
参考： https://blog.csdn.net/liuchuanlong/article/details/79965727...
2024/4/28 1:00:49
定义一个泛型为String类型的List集合，统计该集合中每个字符（注意，不是字符串）出现的次数。
package day09Map集合.day07homework; import java.util.ArrayList; import java.util.HashMap; import java.util.List; public class Demo04 { public static void main(String[] args) { /定义一个泛型为String类型的List集合，统计该集合中每个字符（注…...
2024/5/6 10:38:11
Java学习4-2_常用工具类
常用库类一、 java.util.Objects 1 Object方法 1.1 equals equals方法是判断两个对象是否相等，并且它是空安全（null safe）的。在比较两个对象的时候，Object.equals方法容易抛出空指针异常。源码如下 public static bool…...
2024/4/28 18:48:29
express中使用supervisor
背景：由于每次修改一些文件之后我们都要手动重启文件才能运行，就是要手动执行npm start 才能刷新内容，为了方便起见呢，我们可以安装supervisor依赖来监听代码的变化从而达到自动启动的效果。全局安装： npm install -…...
2024/4/28 21:35:49
【转载】win10下安装GPU版本的TensorFlow（cuda + cudnn）
链接：https://cloud.tencent.com/developer/article/1475455 一、明确自己电脑的适配版本的cuda 打开NVIDIA控制面板——>设置physx配置——>组件，可以看到NVIDIA.DLL， 后面的就是你应该安装的版本二、下载对应版本的cuda, cudnn …...
2024/4/28 0:18:50

（2020-09-25）一起学习css3

归纳：

CSS 的概述

CSS 解决了什么问题?

CSS 的基础语言以及页面引用

Css文本及字体、链接、背景