标签：style color font border 选择器 CSS size
CSS简介：
Cascading Style Sheet的缩写，层叠样式表，用于修饰html页面中的标签（也就是美化网页的）。
1. 三种引入方式
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>css入门</title>
<!--内部样式-->
<style>
a {
font-size: 20px;
color: chartreuse;
}
</style>
<!--外部样式-->
<link href="01.css" rel="stylesheet" />
</head>
<body>
<!--
1. 行内样式：
html标签中指定style属性
style="css样式属性1 : 属性值1; css样式2 : 属性值2;"
-->
<a href="#" style="font-size: 30px; color: aqua;">一年级</a><br />
<!--
2. 内部样式：
在head标签体中定义一个style标签
<style>
选择器 {
css属性 : css属性值;
}
</style>
-->
<a href="#">二年级</a><br />
<a href="#">三年级</a><br />
<a href="#">四年级</a><br />
<!--
3. 外部样式：
a. 定义一个以.css结尾的文件
b. 当前html页面中要引入外部css文件
c. 在head标签中定义标签
-->
</body>
</html>
2. css选择器
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>css选择器</title>
<style>
/*标签选择器*/
div {
font-size: 10px;
color: #00F;
}
/*class类选择器*/
.c_d1 {
font-size: 15px;
color: #0F0;
}
/*id选择器*/
#dl2 {
font-size: 20px;
color: #F00;
}
/*得出结论：id选择器优先级 > class选择器 > 标签选择器 !!!*/
/*并集选择器*/
.c_d1, #dl2 {
font-size: 25px;
background-color: greenyellow;
}
/*交集选择器*/
div span{
font-size: 30px;
color: grey;
}
/*通配符选择器*/
* {
font-size: 20px;
color: #CCC;
}
</style>
</head>
<body>
<!--
1. Element（元素/标签）选择器：
标签名称 {
css样式属性:css属性值;
}
2. class类选择器：
在html标签中给定class属性
特点：在同一个html页面中多个标签可以指定同名的class选择器
.class {
css样式属性:css属性值;
}
3. id选择器：
在标签中给定一个id属性值
特点：在同一个html页面中，标签的id属性值必须唯一，不能重复
#id属性值 {
css样式属性:css属性值;
}
4. 并集选择器：
selector1, selector2, ...selectorn {
css样式属性:css样式属性值;
}
5. 交集选择器（子元素选择器）：
selector1 selector2 {
css样式属性:css样式属性值;
}
6. 通配符选择器：
* {
css样式属性:css样式属性值;
}
-->
<div class="c_d1" id="dl2">哈哈哈哈哈哈哈哈<span>hahahaha</span></div>
<div class="c_d1">呵呵呵呵呵呵呵呵</div>
</body>
</html>
伪类选择器：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>伪类选择器</title>
<!--
伪类描述的是当前标签所经历的状态。
1）link：鼠标还没有访问过的状态
2）visited：鼠标已经访问过的状态，点击了并且松开了
3）active：鼠标激活状态，点击了但是没松开
4）hover：鼠标悬停在标签的状态
选择器:状态 {
css样式属性:css属性值;
}
-->
<style>
/*link状态*/
a:link{
font-size: 26px;
color: #F00;
/*
文本修饰属性：text-decoration :
属性值：none：无下划线
属性值：underline：有下划线
*/
text-decoration: none;
}
/*visited状态*/
a:visited{
font-size: 26px;
color: #ccc;
}
/*hover状态*/
a:hover{
font-size: 30px;
color: #00F;
/*文本修饰:添加下划线*/
text-decoration: underline;
}
/*active状态*/
a:active{
font-size: 36px;
color: #0F0;
text-decoration: none;
}
</style>
</head>
<body>
<a href="css三种引入方式.html">哈哈哈</a>
</body>
</html>
- 以下是一个有关伪类选择器的练习，以供大家参考：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>伪类选择</title>
<style>
tbody tr:hover{
background-color: blue;
}
tbody td {
/*鼠标cursor属性：pointer小手*/
cursor: pointer;
}
</style>
</head>
<body>
<table border="1px" cellspacing="0" width="500px" height="300px" align="center">
<!--表格拆分：head、body、foot-->
<thead>
<tr>
<th>序列</th>
<th>姓名</th>
<th>班级</th>
<th>成绩</th>
</tr>
</thead>
<tbody>
<tr align="center">
<td>01</td>
<td>张三</td>
<td>计算机1班</td>
<td>96.0</td>
</tr>
<tr align="center">
<td>02</td>
<td>王五</td>
<td>计算机2班</td>
<td>85.0</td>
</tr>
<tr align="center">
<td>03</td>
<td>李四</td>
<td>计算机3班</td>
<td>99.5</td>
</tr>
</tbody>
<tfoot>
<tr>
<td colspan="3">总计</td>
</tr>
</tfoot>
</table>
</body>
</html>
3. 文本属性
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>css文本</title>
<style>
/*
文本颜色：color
字符间距：letter-spacing
单词间距：world-spacing（两个字符组成一个单词）
文本修饰：text-decoration
none：不设置
underline：下划线
overline：上划线
line-through：中划线 应用场景：现价和原价
文本排列方式：text-align
*/
body {
color: red;
letter-spacing: 10px;
word-spacing: 10px;
text-decoration: line-through;
text-align: center;
}
</style>
</head>
<body>
今天天气好晴朗！
</body>
</html>
4. 字体属性
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>css字体</title>
<style>
/*
字体类型：font-family
字体大小：font-size
字体样式：font-style
默认normal
italic：倾斜
字体粗细程度：font-weight
默认normal
bold：适当加粗
body {
font-family: "宋体";
font-size: 26px;
font-style: oblique;
font-weight: bold;
}
*/
/*
字体简写属性：将所有针对字体的属性设置到一个声明中
必须按照指定顺序！
font : font-style font-weight font-size font-family
*/
body {
font:oblique bold 26px "宋体";
}
</style>
</head>
<body>
好好学习，天天向上~
</body>
</html>
5. 列表属性
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>css列表</title>
<style>
/*去掉默认的列表项的标记（disc，circle，square），用户自定义列表项的标记*/
/*
ul {
list-style-type: none;
list-style-image: url(img/start.jpg);
}
*/
/*列表项list-style的简写属性设置*/
ul {
list-style: none url(img/start.jpg);
}
</style>
</head>
<body>
xxx学校教务管理系统
<ul type="disc">
<li>选课管理</li>
<li>成绩管理</li>
<li>其他</li>
</ul>
</body>
</html>
6. 表格属性
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>css表格</title>
<style>
table {
/*
CSS表格的样式属性:border-collapse
类似于表格标签cellspacing属性
*/
border-collapse : collapse;
}
</style>
</head>
<body>
<table border="1px" cellspacing="0" width="500px" height="300px" align="center">
<!--表格拆分：head、body、foot-->
<thead>
<tr>
<th>序列</th>
<th>姓名</th>
<th>班级</th>
<th>成绩</th>
</tr>
</thead>
<tbody>
<tr align="center">
<td>01</td>
<td>张三</td>
<td>计算机1班</td>
<td>96.0</td>
</tr>
<tr align="center">
<td>02</td>
<td>王五</td>
<td>计算机2班</td>
<td>85.0</td>
</tr>
<tr align="center">
<td>03</td>
<td>李四</td>
<td>计算机3班</td>
<td>99.5</td>
</tr>
</tbody>
<tfoot>
<tr>
<td colspan="3">总计</td>
</tr>
</tfoot>
</body>
</html>
7. 边框属性
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>css边框</title>
<style>
div {
/*主要针对div标签的边框，边框有上右下左四个边*/
/*1. 指定边框颜色：
border-top-color: #F00;
border-left-color: #0F0;
border-right-color: #F00;
border-bottom-color: #c90;*/
/*2. 指定边框宽度：
border-top-width: 10px;
border-left-width: 20px;
border-right-width: 30px;
border-bottom-width: 40px;*/
/*3. 指定边框样式：solid：单实线，dubbole：双实线，dashed：虚线，dotted：点
border-top-style: solid;
border-left-style:dotted;
border-right-style: double;
border-bottom-style: dashed;*/
/*
边框的颜色、宽度、样式的简写属性：
border-color设置四个边框的颜色
border-width设置四个边框的宽度
border-style设置四个边框的样式
边框的颜色/宽度/样式都符合这个特点，按照上右下左的顺序
某一边如果没有设置颜色/宽度/样式，会补齐对边的
border-color: #00F #F00;
border-width: 10px;
border-style: solid;*/
/*边框boder的简写属性：border : border-width border-style border-color*/
width: 300px;
height: 300px;
border:2px solid #000;
}
</style>
</head>
<body>
<div>星期六</div>
<div>星期天</div>
</body>
</html>
8. 背景属性
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>css背景</title>
<style>
body {
/*背景颜色/背景图片*/
/*background-color: #7FFF00;
background-image: url(img/mm.jpg);*/
/*
设置背景图片时：图片x轴/y轴默认在重复
需要用background-repeat:设置图片是否重复以及如何重复
默认值:repeat:x轴/y轴重复
}
*/
/*background-repeat: no-repeat;*/
/*
背景图片如果设置了不重复，会有一个默认的起始位置（浏览器左上角）
设置背景图片的起始位置（在浏览器中显示的位置）：background-position
图片的起始位置：top center bottom
浏览器的位置：left center right
*/
/*background-position: top center;*/
/*
背景图片的简写属性：
background : color img repeat position;
*/
background: pink url(img/mm.jpg) no-repeat top center;
</style>
</head>
<body>
</body>
</html>
9. 浮动属性
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
#dl1 {
width: 200px;
height: 200px;
border:1px solid "#00F";
background-color: #0000FF;
/*左浮动*/
/*float: left;*/
}
#dl2 {
width: 200px;
height: 200px;
border: 1px solid "#F00";
background-color: aqua;
/*右浮动*/
/*float: right;*/
}
#dl3 {
width: 200px;
height: 200px;
border: 1px solid "FF0";
background-color: #808080;
}
#clear {
clear: both;
}
</style>
</head>
<body>
<div id="dl1">January</div>
<div id="dl2">February</div>
<div id="dl3">March</div>
<div id="clear"></div>
</body>
</html>
如有任何问题，欢迎各位指正~~
标签：style,color,font,border,选择器,CSS,size 来源： https://blog.csdn.net/qq_43508801/article/details/89677689
本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享； 2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关； 3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关； 4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除； 5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。