css基础及其实例：常用选择器、颜色五中写法、字体样式、自定义字体、盒模型及其样式设置
<html lang="en">
<head>
<meta charset="UTF-8">
<title>css样式</title>
<style>
/* 选择符权重从小到大：
* < 元素 < class类 < id < !important
*/
/*通配符选择器*/
*{
color: red;
}
/*元素选择器*/
div{
/*设置字体颜色*/
color: blue;
/*设置字体下划线*/
text-decoration: underline;
/*设置鼠标移动到该位置后，鼠标样式为超链接样式*/
cursor: pointer;
}
/*id选择器*/
#div1{
color: orange;
}
a{
color: black;
text-decoration: none;
/*设置鼠标移动到该位置后，鼠标样式为文本样式*/
cursor: text;
}
/*class类选择器*/
.cldiv1{
color: aqua !important;
}
/* 颜色写法：
英文单词： color:blue;
RGB三种基本色： color: rgb(255,255,255);
RGB的百分比写法： color: rgb(0%, 50%, 50%);
16进制写法： color: #33eeff;
16进制的缩写形式的，必须是两两重复才能这样写： color: #33eeff; →color: #3ef;*/
/*字体*/
/*一般来说，系统的默认字体大小为16px*/
ul.cl2{
font-size: 30px;
/*字体加粗*/
font-weight: bolder;
/*相对长度单位，px em
em,对应当前字体下大写的字母M的宽度
*/
font-size: 1em;
/*系统的默认字体大小的百分比*/
font-size: 150%;
/*字体样式*/
font-family: "Franklin Gothic Medium";
/*自定义字体*/
font-family: myfontname;
}
/*自定义字体*/
@font-face {
//字体名称myfontname
font-family: 'myfontname';
//字体文件所在路径
src: url('fonts/简娃娃篆.ttf');
}
</style>
</head>
<body>
<!--onclick="location.href='http:///www.baidu.com'"设置可跳转，并设置跳转的地址-->
<div id="div1" onclick="location.href='http:///www.baidu.com'">111111111</div>
<!--onclick="return false"设置超链接为不可跳转-->
<a href="#" onclick="return false">超链接</a>
<div class="cldiv1">33333333333333</div>
<br><br>
<ul class="cl2">
<li><a href="#">四川省</a></li>
<li><a href="#">云南省</a></li>
<li><a href="#">贵州省</a></li>
<li><a href="#">西藏自治区</a></li>
<li><a href="#">青海省</a></li>
<li><a href="#">新疆维吾尔自治区</a></li>
</ul>
<br><br>
</body>
</html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>样式之盒模型</title>
<style>
body{
/*外边距*/
margin: 0;
/*内边距*/
padding: 0;
/*
四个值代表： 上 右 下 左
padding: 50px 0 0 30px;
三个值代表： 上 左右 下 auto自适应（居中）
padding: 50px auto 30px;
两个值代表：上下 左右
padding: 50px 30px;
padding: 50px;*/
}
div{
/*背景颜色*/
background-color: aquamarine;
/*固定宽度*/
width: 100px;
height: 50px;
/*上下边距0，左右居中*/
margin: 0 auto;
/*border设置边框*/
/*border:2px（边框宽度） solid（边框样式） red（边框颜色）;
solid 实线
dotted 圆点
dashed 虚线
double 双实线
inset 3D边框1
groove 3D边框2
*/
border:5px inset red;
border: none;
border: 5px solid blue;
/*圆角边框*/
border-radius: 5px;
/*椭圆边框*/
border-radius: 50%/50%;
border-radius:0;
/*设置左上圆角边框*/
border-top-left-radius: 50%;
/*单独设置左边边框*/
border-left: 1px solid orangered;
}
/*行内元素，默认情况下是不能设置高度和宽度的*/
span{
background-color: #33eeff;
/*使用display属性，设置值为inline-block后，那么行内元素也可以设置宽度和高度*/
display: inline-block;
width: 200px;
height: 50px;
/*左右居中*/
text-align: center;
padding-top: 30px;
}
/*水平分割行实质上是边框*/
hr{
width: 10px;
height: 50px;
border: none;
border-left: 2px dashed greenyellow;
}
/*外边距重合：*/
/*上方盒模型的下侧外边距会和下方盒模型的上侧外边距重合，只取2个值中最大的一个*/
#div1{
width: 50px;
height: 50px;
background-color: orange;
/*div内字体超过设置的边框时隐藏*/
overflow: hidden;
margin-bottom: 50px;
}
#div2{
width: 50px;
background-color: blue;
overflow: hidden;
margin-top: 30px;
}
</style>
</head>
<body>
<div>11111</div>
<span>222222222222</span>
<br>
<hr>
3333333
<div id="div1">44444</div>
<div id="div2">555555
<div id="div21">66666</div>
</div>
</body>
</html>
