一、基本结构：
a、行内样式: 不建议使用---不够灵活和重用(复用)
<p style="color:lightcoral; font-size:18px;">
b、内部样式: 在当前页设计样式表，对当前页的标签都有效
CSS代码写在<head>的<style>标签中
style标签里
选择器 选择器名字{
样式名: 值;
}
c、外部样式：把样式表写入专门的一个文件css中
CSS代码保存在扩展名为.css的样式表中
HTML文件引用扩展名为.css的样式表
<link rel="stylesheet" type="text/css" href="css/common.css"/>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>第一题</title>
<!-- 外部样式表，作用在所有页面，前提页面需要通过下列标签将css引入 -->
<link href="my.css" rel="stylesheet" type="text/css"/>
<style>
/* 内部样式表：作用域是当前页面 */
.mydiv{
color: green;
}
</style>
</head>
<body>
<!-- 行内样式表 ，作用域只是该标签-->
<div style="color: red;">这是div标签，class=mydiv</div>
<div class="mydiv">这是div标签，class=mydiv</div>
<div id="div2" >这是div标签，id="div2"</div>
</body>
</html>#div2{
color: blue;
}
#div3{
color: blue;
}
.mydiv{
color: blue;
}运行结果：
优先级： 行内样式 > 内部样式|外部样式
内部样式|外部样式，根据前后顺序来决定，处于最后面的css样式会被应用
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>第一题</title>
<style>
/* 内部样式表：作用域是当前页面 */
.mydiv{
color: green;
}
</style>
<!-- 外部样式表，作用在所有页面，前提页面需要通过下列标签将css引入 -->
<link href="my.css" rel="stylesheet" type="text/css"/>
</head>
<body>
<!-- 行内样式表 》 内部样式表-->
<div style="color: red;" class="mydiv" >这是div标签，class=mydiv</div>
<!-- 行内样式表 > 外部样式 -->
<div style="color: red;" id="div2" >这是div标签，class=mydiv</div>
<!-- 显示蓝色，id优先级高于class优先级 -->
<div class="mydiv" id="div3">这是div标签，class=mydiv</div>
<!-- 内部样式表和外部样式，后加载的起作用-->
<div class="mydiv" >这是div标签，class=mydiv</div>
</body>
</html>运行结果：
d、基本样式：
（1）字体：
字体类型 font-family
字体大小 font-size
（2）文本
color 颜色
text-align 对齐方式（left right center）
line-height 行高 ---垂直居中
text-indent 设置首行文本的缩进
text-decoration 文本修饰 下划线（
text-decoration:underline;
none： 无
underline： 下划线
overline： 上划线
line-through：删除线
）
（3）背景样式：
颜色 默认单词
3组16进制数表示---值越大，颜色越浅
R 红 G 绿 B 蓝
color: #8273FF;
红色 #F00
background-color 背景色
background-image:url(); 背景图
背景图片滚动：background-attachment:fixed()/scroll(滚动);
背景图片位置：background-position:left(水平) top(垂直);
简写方法:background:#fff url() left top repeat;
设置背景图片的大小background-size: 100px 100px;
组合写法：background: #8273FF url(img/login_bg.jpg) 50px 100px no-repeat
二、选择器
1、标签选择器--只用于P标签（用标签名来命名）
2、类选择器--小数点+自己命名
3、ID选择器--唯一性（#+自己命名）
优先级：行内>ID>类>标签
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>样式</title>
<!-- 选择器 公共使用 -->
<style type="text/css">
/* 标签选择器 --只作用于P标签 */
p {
width: 300px;
font-size: 15px;
border-bottom: 1px solid #F08080;
}
/* 类选择器 .+自己名*/
.lightcolor {
/* color: aquamarine; */
color: #82FF52;
background-color: #FFAA56;
font-size: 15px;
/* 字体样EECC
font-family: 楷体;
/* 文本样式 */
text-align: right;
/* line-height: 150px; */
/* vertical-align: middle; */
height: 150px;
}
/* id选择器 唯一性*/
#bigfont {
color: blueviolet;
font-size: 10px;
}
/* 取消超链接的下划线 */
a{
text-decoration: none;
}
body{
/* background-image: url(img/1660533114988.jpg);
background-repeat: no-repeat; */
/* 50px 100 px 偏移 */
background: cadetblue url(img/1660533114988.jpg) 200px 100px no-repeat;
}
</style>
<!-- 连接css文件，需要什么资源调用哪个文件 -->
<!-- <link rel="stylesheet" type="text/css" href="css/common.css"> -->
</head>
<body>
<!-- 行内样式 颜色样式 字体大小-->
<!-- <p style="color: aquamarine;font-size: 18px;"> -->
<p class="lightcolor">
插入排序的原理会比较麻烦，<a href="index.html" target="_blank">他是将第一个元素</a>作为起始数组，
</p>
<p>
如果系统中存在临界资源（资源数量少于竞争资源的线程数量的资源），例如正在写的数据以后可能被另一个线程读到，或者正在读的数据可能已经被另一个线程写过了，那么这些数据就必须进行同步存取（数据库操作中的排他锁就是最好的例子）。当应用程序在对象上调用了一个需要花费很长时间来执行的方法，并且不希望让程序等待方法的返回时，就应该使用异步编程，在很多情况下采用异步途径往往更有效率。事实上，所谓的同步就是指阻塞式操作，而异步就是非阻塞式操作。
</p>
<p id="bigfont">
快速排序是这四种排序中最复杂的，但在处理大量数据的排序时，快速排序却是效率最高的，他的原理很简单：先从一堆数据中挑选出一个基准数，然后将比这个基准数小的数据全部放在基准数的前面，将比他大的放在基准数后面，此时，不管前后，都是无序的，然后再分别在前后两组数据中挑出一个基准数，重复此操作，一直分下去，分成两部分、四部分、八部分。。。直到每一个数据的左边都比他小，右边都比他大，此时整个数组就是有序的了
</p>
<p class="lightcolor">
TreeSet要求存放的对象所属的类必须实现Comparable接口，该接口提供了比较元素的compareTo()方法，当插入元素时会回调该方法比较元素的大小。
TreeMap要求存放的键值对映射的键必须实现Comparable接口从而根据键对元素进行排序。
</p>
</body>
</html>三、普通样式
1、伪类样式
超链接四个链接状态是：（顺序不能改变）
a:link - 正常，未访问过的链接
a:visited - 用户已访问过的链接
a:hover - 当用户鼠标放在链接上时
a:active - 链接被点击的那一刻
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style type="text/css">
/* 正常，未访问过的链接 */
a:link{
color:red;
}
/* 用户已访问过的链接 */
a:visited{
color: green;
}
/* 当用户鼠标放在链接上时 */
a:hover{
color: blue;
}
/* 链接被点击的那一刻 */
a:active{
color: yellow;
}
/* 项目常用打法 增加了背景颜色*/
span:hover{
color: red;
background-color: pink;
}
</style>
</head>
<body>
<a href="http://www.csdn.com">CSDN网站</a>
<a href="http://www.baidu.com">百度</a>
<span>menu1</span>
<span>menu2</span>
<span>menu3</span>
</body>
</html>运行结果：
增加手型标识
li:hover{ text-decoration: underline; cursor: pointer;/*手型*/ color: chocolate; }
2、列表样式
list-style 设置列表项前面的符号，一般为none
list-style-image: url(img/book1.jpg); 列表项前面的图标
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style type="text/css">
ul li{
border: 1px solid red;
}
ul{
/* list-style-type: none; */
/* 把图标插在列表里 */
list-style-position: inside;
/* 在列表前加图标 */
/* list-style-image: url("img/1.png"); */
/* list-style: none; */
}
</style>
</head>
<body>
<ul>
<li>menu1</li>
<li>menu2</li>
<li>menu3</li>
</ul>
</body>
</html>运行结果：
3、显示样式
（1）行级元素
行级元素（行内元素）
<a>
<strong>
<em>
span
内嵌元素的特性：
1.默认同行可以继续跟同类型标签
2.内容撑开宽度
3.不支持宽高
4.不支持上下的margin,padding，支持左右
span
span是一个特殊的行级标签，和div（块级标签）一样，没有任何语义（样式）。
通常用来着重显示某行文字中的某个单词
（2）块级约束
<p>
<div>
<h1>~<h6>
<ol>-<li>
<ul>-<li>
块元素的特性：
1.默认独占一行显示
2.没有宽度时，默认撑满一排
3.支持所有css命令
（3）元素相互转换—display属性
控制元素的显示和隐藏
display 显示与否
none 不显示
block 块级方式显示
inline 行级方法显示
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>列表展示</title>
<style>
/* 显示样式 */
/* .heddenul{
display: none;
} */
/* 代表儿子(用伪类控制子标签) .outul li 代表所有 */
.outul>li:hover>ul{
display: block;
}
/* 用父标签管理子标签 空格 当前标签内的所有子标签 */
.outul ul{
display: none;
}
/* .outul ul li{
display: none;
}
*/
/* 通配符 */
/* *{
margin: 0;
padding: 0;
} */
</style>
</head>
<body>
<!-- 无序列表 -->
<h2>无序列表</h2>
<ul type="square">
<li>家电</li>
<li>服装</li>
<li>日用品</li>
<li>食品</li>
</ul>
<!-- 嵌套列表(子列表)-->
<h2>嵌套列表</h2>
<ul class="outul" >
<li>管理员
<ul class="heddenul">
<li>查询</li>
<li>添加</li>
</ul>
</li>
<li>学校
<ul class="heddenul">
<li>查询</li>
<li>添加</li>
</ul>
</li>
<li>班级</li>
<li>团队</li>
</ul>
</body>
</html>运行结果：
2336
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
