标签：color 第二 solid background 板斧 font border CSS
1.CSS的伪类选择器
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>CSS伪类选择器</title>
<style>
/*link状态*/
a:link{
/*文本修饰*/
text-decoration: none;/*去掉下划线*/
color: :#F00;
}
/*visited状态*/
a:visited{
color:#CCC;
font-size: 20px;
}
/*hover状态--常用*/
a:hover{
color:#00F;
/*文本修饰*/
text-decoration: underline;
font-size: 20px;
}
/*active状态*/
a:active{
color:#FF0000;
/*文本修饰*/
text-decoration: none;
font-size: 30px;
}
</style>
<!--
CSS伪类：指定当前标签的状态
link状态：鼠标未访问过的状态
hover状态：鼠标经过标签的时候的一种状态
active状态：激活状态，鼠标点击了，但是没有松开的状态
visited：已经访问过的状态（鼠标点击过了并且松开了）
CSS伪类选择器注意：
1）在 CSS 定义中，a:hover 必须被置于 a:link 和 a:visited 之后，才是有效的。
2）在 CSS 定义中，a:active 必须被置于 a:hover 之后，才是有效的。
3）伪类名称对大小写不敏感。
-->
</head>
<body>
<a href="02_目标页面.html">超链接</a>
</body>
</html>
2.CSS文本属性
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>CSS文本属性</title>
<!--
CSS格式
CSS(properties):CSS属性(value)
-->
<style>
body{
/*字体*/
color: red;
/*字体间距*/
letter-spacing: 5px;
/*文本对齐方式*/
text-align: center;
/**文本修饰：
* nono：去掉下划线
* underline：下划线
* overline：下划线
* line-through：中划线
*/
/*单词间距
解析：CSS属性的时候：默认两个字组成一个单词
* */
word-spacing: 10px;
}
</style>
</head>
<body>
千树万树梨花开
</body>
</html>
3.CSS背景
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>CSS背景</title>
<style>
body{
/*背景颜色：background-color*/
/*
* background-image:设置背景图片
*/
/*background-image:url(img/唐诗logo.png);*/
/**
* 背景图片：默认x轴和y轴重复
*/
/**
* background-repeat:设置图像是否重复以及如何重复
* no-repeat：图片不重复，但是图片默认的位置在左上角（top-left ）
*
*/
/*background-repeat:no-repeat;*/
/**
* 设置背景图片的起始位置
* 图片的三个位置（上下）：top、center、bottom
* 浏览器的三个位置（左右）：left、center、right
*/
/**
*背景简写属性：
* background:background-color
* background-img
* background-repeat
* background-position
*/
background: #00F url(img/唐诗logo.png) no-repeat top;
}
</style>
</head>
<body>
</body>
</html>
4.CSS表格
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>CSS背景</title>
<style>
body{
/*背景颜色：background-color*/
/*
* background-image:设置背景图片
*/
/*background-image:url(img/唐诗logo.png);*/
/**
* 背景图片：默认x轴和y轴重复
*/
/**
* background-repeat:设置图像是否重复以及如何重复
* no-repeat：图片不重复，但是图片默认的位置在左上角（top-left ）
*
*/
/*background-repeat:no-repeat;*/
/**
* 设置背景图片的起始位置
* 图片的三个位置（上下）：top、center、bottom
* 浏览器的三个位置（左右）：left、center、right
*/
/**
*背景简写属性：
* background:background-color
* background-img
* background-repeat
* background-position
*/
background: #00F url(img/唐诗logo.png) no-repeat top;
}
</style>
</head>
<body>
</body>
</html>
5.CSS字体属性
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>CSS字体属性</title>
<style>
body{
/*字体类型：font-family
* CSS样式库中所有的字体库
* */
font-family: "微软雅黑";
/*字体大小：font-size*/
font-size: 26px;
/*字体样式:
* 默认nomal
* italic：斜体
* oblique：斜体更加明显
* */
font-style: italic;
/*字体粗细：font-weight
blod:适当加粗
* */
font-weight: bold;
/*简写属性：将上面所有的属性都写到一起
font:font-style font-size font-weight
对于字体属性，我们知道怎么写就可以了
* */
font: italic bold 26px "宋体";
}
</style>
</head>
<body>
百花绽放,hello world
</body>
</html>
6.CSS边框属性
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>CSS边框属性</title>
<style>
div{
/*边框线的颜色
*border-color：是边框颜色的简写属性
* 分别给四个边框设置颜色
* 注意:
* (1)边框属性的设置必须是：上、右、下、左
* (2)边框的颜色/宽度/样式：某一边没有给定颜色、样式、宽度、样式，会取对边颜色、宽度、样式
*/
/*border-top-color:#00F ;
border-left-color:red ;
border-right-color:greenyellow ;
border-bottom-color:green;*/
/*边框颜色的简写属性：border-color*/
/*border-color: #00F,#0000FF,#C90,#F00;*/
/**边框线的宽度：
* 分别设置四个边框线的宽度
*
*/
/*border-top-width:10px ;
border-right-width:10px ;
border-bottom-width:10px;
border-left-width:20px ;*/
/*border-width: 10px,20px,30px,40px;*/
/**
* 如果标签想要指定边框的显示效果，那么必须要指定边框的样式
* border-style
* solid:单实现
* double：双实线
* dotted：点
* dashed：虚线
*/
/**
* 设置四个边的样式
*/
/*border-top-style:solid;
border-right-style:dashed;
border-bottom-style:solid;
border-left-style:solid; */
/*border-style: solid,solid,dashed,solid;*/
/*边框的简写属性
*border:边框宽度 边框样式 边框颜色
*/
border:3px solid #000;
width: 200px;
height: 200px;
}
</style>
</head>
<body>
<div>div的内容</div>
</body>
</html>
7.CSS盒子模型【重点】
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>盒子模型</title>
<!--一定要记住那个图像，知道各个单词具体表示的是什么距离
网页布局：
div（块标签）+CSS
通过padding/margin设置内边距/外边距
-->
<style>
div{
width: 200px;
height: 200px;
#d1{
}
}
</style>
</head>
<body>
<div id="d1">div1</div>
<div id="d2">div2</div>
</body>
</html>
8.CSS浮动
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>CSS浮动</title>
<style>
#d11{
width: 200px;
height: 200px;
background-color: #F00;
border: 1px solid #000;
/*设置一个浮动属性*/
float: right;
}
#d12{
width: 200px;
height: 200px;
background-color: #00F;
border: 1px solid #000;
float: right;
}
#d13{
width: 200px;
height: 200px;
background-color: yellow;
border: 1px solid #000;
}
#clear{
/*清除浮动:加在哪个标签的下面哪个文档就会被清除浮动属性*/
clear: both;
}
</style>
<!--特别重要
CSS浮动：float属性——left/right
当前某个设置了浮动，那么这个标签就脱离了当前文档流只要遇到边框就会停止，后面依次排队的元素就会默认的填充当前文档流（符合一种流式布局）
有时候考虑页面布局：带浮动属性标签会影响后面标签的布局，需要设置当前左右两边不浮动（不会随着文档流的变化而变化）
-->
</head>
<body>
<div id="d11">div1</div>
<div id="clear"></div>
<div id="d12">div2</div>
<div id="clear"></div>
<div id="d13">div3</div>
</body>
</html>
9.CSS列表
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>CSS列表</title>
<style>
ul{
/*自定义一个列表标记*/
/**列表样式类型——先去掉*/
list-style-type:none ;
/*将指定图片设置为列表标记*/
list-style-image: url(img/唐诗logo.png);
}
</style>
</head>
<body>
XX学生管理系统：
<ul type="square">
<li>选课管理</li>
<li>教务管理</li>
<li>其他</li>
</ul>
</body>
</html>
10.CSS定位
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>CSS定位</title>
<!--CSS定位：有三种定位方式
定位属性：position
相对定位：relative----相对于原来的属性元素的位置进行定位
绝对定位：absolute----相对于父标签(浏览器的位置)的位置进行定位——所以这个重要我们变换浏览器就可能会让我们的布局改变
固定定位：adv----
-->
<style>
div{
width:200px;
height: 300px;
border: 1px solid #000;
}
#d11{
background-color: red;
}
#d12{
background-color: yellow;
}
#d13{
background-color: blue;
/*相对定位*/
/*position: relative;*/
position: absolute;
top:20px;
left: 40px;
}
/*固定定位:使用场景--网站中的广告，是关闭不了的，必须要我们取点击，这些关不了的效果必须要js去完成*/
#adv{
background-color: #00F;
position: fixed;
top: 200px;
left: 400px;
}
</style>
</head>
<body>
<div id="d11">div1</div>
<div id="d12">div2</div>
<div id="d13">div3</div>
<div id="adv"><font color="red">立刻咨询</font></div>
</body>
</html>
标签：color,第二,solid,background,板斧,font,border,CSS 来源： https://blog.csdn.net/ZhuiZhuDream5/article/details/88966956
本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享； 2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关； 3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关； 4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除； 5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。