css基础（css的使用方式）
一、css使用方式：
1、行内样式（内联样式）
2、页面嵌入（内部样式表）
3、外部文件（外部样式表）
4、外部导入样式（主要用在样式初始化）
因为一些标签有自己的样式，我们需要清空。
二、颜色的表示方法
1、颜色的英文单词（red/yellow/blue/brown/green等）
2、16进制表示法（#000000黑色 #ffffff白色）
3、RGB表示法（rgb （0-255,0-255,0-255））
三、css语法
选择器{
属性名1:属性值1;
属性名2:属性值2;
......
}
四、css选择器
1、ID选择器
使用id选择器：在元素上面增加一个id属性,id属性的属性值不用用数字开头
一个页面中只能有一个id属性值
css中id选择的表示方法用 # 表示
2、class选择器
使用class选择器：在元素上增加一个class属性，class属性的属性值不能用数字开头
一个页面中可以有多个class属性值
css中class选择器的表示方法用 . 表示
3、标签选择器
直接写标签名
4、组合选择器
选择器直接用,分隔开即可
5、子代选择器
> 只针对子代
6、后代选择器
用空格表示，包含着子代选择器/
7、通用选择器
* 针对于所有的标签
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>css</title>
<style type="text/css">
/*七种选择器*/
/*ID选择器*/
#d1{
width: 50px;
height: 50px;
background-color: red;
}
/*class选择器*/
.d2{
width: 100px;
height: 100px;
background-color: green;
}
/*标签选择器,直接写标签名*/
a{
width: 150px;
height: 150px;
background-color: blue;
}
input{
width: 160px;
height: 160px;
background-color: blue;
}
/*组合选择器*/
a,input,button,img{
width: 200px;
height: 200px;
background-color: #FF0;
}
/*子代选择器*/
.grand{
width: 500px;
height: 500px;
background-color: #f00;
}
.grand>.father{
width: 300px;
height: 300px;
background-color: #0ff;
}
/*后代选择器 用 "空格 "分隔开*/
.f1{
width: 500px;
height: 500px;
background-color: #0000FF;
}
.f1 .f3{
width: 300px;
height: 300px;
background-color: #FFFF00;
}
/*通用选择器 。适用于所有标签*/
*{
border: 10px solid #008000;
}
</style>
</head>
<body>
<div id="d1"></div>
<div class="d2"></div><!--行内标签，不能设置宽和高 比如a标签-->
<a href="">balabala</a>
<!--行内块标签，可以设置宽和高-->
<input type="" name="" id="" value="" />
<button></button>
<!--子代选择器-->
<div class="grand">
grand
<div class="father">
father
<!--<div class="son">
son
</div>-->
</div>
</div>
<br />
<!--后代选择器 包含子代选择器-->
<div class="f1">f1
<div class="f2">f2
<div class="f3">f3
</div>
</div>
</div>
<!--通用选择器，用于所有标签-->
</body>
</html>
五、选择器权重
选择器是有权重的
内联样式 1000
id 100
class 10
元素 1
通用 0
boss !important 只要出现，就以这个为主
权重越高，冲突部分的样式就以权重高的为主，并不是说这个选择器没有用了，而是里面冲突的样式
权重仅仅只能作为参考
权重的计算
不需要管子代和后代的
如果权重相同，就近原则。以后定义的为准。
六、文本类样式
<style type="text/css">
div{
width: 500px;
height: 500px;
border: 1px solid #000;
text-align: right; /*文本对其方式*/
text-decoration: underline; /*文本下划线*/
color: #f00; /*设置字体的颜色*/
line-height: 166.67px; /*文本的行高*/
/*一行文字所占的高度,让他上下居中*/
/*font-family: "Microsoft YaHei";*/ /*设置字体的样式:宋体，楷体... 去百度，翻译中英文 */
font-family: "宋体"; /*自己去百度找到宋体对应的英文，节约空间*/
font-style: italic; /*规定字体是否倾斜*/
font-weight: bold;
font-size: 16px ; /*设置字体的大小*/
/*在浏览器中,默认的字体大小16px
谷歌浏览器中，字体大小最小可以为12px
火狐没有限制
* */
}
a{
text-decoration: none;
}
h1{
font-weight: normal;
font-size: 5px;
}
</style>
<!--:hover 叫伪类选择器
当你的鼠标放上去的时候，会变化成的样子
权值 10
-->
七、列表及样式
1、有序列表
2、无序列表
列子：
<head>
<meta charset="UTF-8">
<title>列表及样式</title>
<style type="text/css">
ul{
list-style: none;
cursor: none; /*设置鼠标的样式*/
display: block; /*元素分为三大类,设置元素的显示方式
行内 inline
块级 block
行内块 inline-block
none 无
* */
}
li{
display: inline;
}
input{
outline: none;
/*visibility: hidden;*/
display: none;
/*这两个的区别?*/
}
</style>
</head>
<body>
<!--有序列表和无序列表-->
<!--实际开发中有序列表基本不用-->
<!--这三个都是块级标签-->
<ol type="1" start="3">
<li>英语</li>
<li>语文</li>
<li>数学</li>
<li>政治</li>
<li>地理</li>
</ol>
<ul type="square">
<li>英语</li>
<li>语文</li>
<li>数学</li>
<li>政治</li>
<li>地理</li>
</ul>
<input type="text" />
</body>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
div{
width: 200px;
height: 200px;
border: 1px solid #000;
}
.div01{
background-color: #f00;
opacity: 0.1; /*取值的范围是0-1之间，可以为0和1*/
/*表示整个元素*/
}
.div02{
background-color: rgba(255,0,0,0.1); /*最后一个参数a表示透明度，取值的范围是0-1之间，可以为0和1*/
/*只表示背景颜色*/
}
</style>
</head>
<body>
<div class="div01">这个是第一段文本</div>
<div class="div02">这个是第二段文本</div>
</body>
