<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>css基本使用</title><!-- 内部样式--><style>/* 标签选择器 */div{background-color: blue;width: 200px;height: 200px}/* class选择器 可多个标签使用*/.box{background-color: yellow;width: 200px;height: 200px}/* id选择器 具有唯一性 */#chuan{background-color: rebeccapurple;width: 200px;height: 200px}</style><!-- 外部样式--><!-- <link rel="stylesheet" href="111.html">--></head><body><!--内联样式--><!-- <div style="background-color:red;width:300px">内联样式</div>--><div>内部样式</div><div class="box" >内部样式22</div><div id="chuan">内部样式22</div></body></html><!--内联样式 > 内部样式 > 外部样式-->
群组选择器
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>群组选择器</title><style>div,p{background-color: aqua;height: 60px;}</style></head><body><div>div盒子</div><p>p标签</p></body></html>
兄弟选择器
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>兄弟选择器</title><style>div~p{background-color: aqua;height: 60px;}</style></head><body><div>div盒子</div><div><span>span标签</span></div><p>p标签</p><p>p标签</p><p>p标签</p></body></html>
相邻选择器
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>相邻选择器</title><style>.div2+p{background-color: aqua;height: 60px;}</style></head><body><div class="div1">div盒子</div><div class="div2"><span>span标签</span></div><p>p标签</p><p>p标签</p><p>p标签</p></body></html>
子代选择器
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>子代选择器</title><style>div>p{background-color: aqua;height: 60px;}</style></head><body><div class="div1">div盒子</div><div class="div2"><span>span标签</span></div><div><p>p1标签</p></div><p>p2标签</p><p>p3标签</p></body></html>
后代选择器
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>后代选择器</title><style>div p{background-color: aqua;height: 60px;}</style></head><body><div class="div1">div盒子</div><div class="div2"><span>span标签</span></div><div><p>p1标签</p><span><p>p11标签</p></span></div><p>p2标签</p><p>p3标签</p></body></html>
class相同
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>Title</title><style>/*首先你必须是个div，其次class为box*/div.box{background-color: palegoldenrod;height: 40px;}</style></head><body><div class="box">我是一个div盒子</div><span class="box">我是一个span盒子</span><p class="box">我是一个p标签</p></body></html>
并集选择器
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>Title</title><style>div,p,.nav li{color: pink;}</style></head><body><div>熊大</div><p>熊二</p><ul class="nav"><li>第一个li</li><li>第二个li</li><li>第三个li</li></ul></body></html>
伪类选择器
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>Title</title><style>/*未被点击的时候*/a:link{color: coral;}/*已被点击的链接*/a:visited{color: brown;}/*鼠标悬停的样式*/a:hover{color: yellow;}/*鼠标点击未释放*/a:active{color: blue;}/*如果这四个选择器都要设置，必须要按照上面的顺序，LVHA*/</style></head><body><a href="#">百度一下</a></body></html>
focus伪类选择器
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>Title</title><style>input:focus{background-color: pink;}</style></head><body><input type="text"><input type="text"><input type="text"></body></html>
字体样式
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>Title</title><style>/*字体*/#box1{font-family: 'Arial','宋体';}/*字体大小*//*% rem em*/#box2{font-size: 28px;}/*字体样式，斜体*/#box3{font-style: italic;/*font-style: oblique;*//*font-style: normal; 如果要把斜体字变为正常的，就用这个*/}/* 颜色 预定义颜色 十六进制颜色#fff rgb(255,0,255)*/</style></head><body><div id="box1">这是第一个div盒子</div><div id="box2">这是第一个div盒子</div><div id="box3">这是第一个div盒子</div><div id="box4">这是第一个div盒子</div><div id="box5">这是第一个div盒子</div><div id="box6">这是第一个div盒子</div></body></html>
文本样式
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>Title</title><style>/*对齐方式 left right center*/#p1{text-align: right;}/*文字缩进*/#p2{text-indent: 2em;}/*词间距*/#p3{word-spacing: 40px;}/*字间距*/#p4{letter-spacing: 20px;}/*线条*/#p5{/*text-decoration: underline; !*下划线*!*//*text-decoration: overline;*/text-decoration: line-through;}</style></head><body><p id="p1">墨染千秋，海纳百川，我是墨川</p><p id="p2">墨染千秋，海纳百川，我是墨川</p><p id="p3">hello my name is mochuan</p><p id="p4">nice to meet you我是墨川</p><div id="p5">墨染千秋，海纳百川，我是墨川</div></body></html>
文字类容超出省略
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>Title</title><style>div{width: 300px;height: 30px;background-color: bisque;/*文本一行显示*/white-space: nowrap;/*超出部分隐藏*/overflow: hidden;/*省略号表示*/text-overflow: ellipsis;}</style></head><body><div>墨染千秋，海纳百川，我是墨川墨染千秋，海纳百川，我是墨川墨染千秋，海纳百川，我是墨川墨染千秋，海纳百川，我是墨川墨染千秋，海纳百川，我是墨川墨染千秋，海纳百川，我是墨川墨染千秋，海纳百川，我是墨川墨染千秋，海纳百川，我是墨川</div></body></html>
块级元素
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>Title</title></head><body><!--h1~h6 div p ol ul li 可以设置宽高，独占一行--><div>123</div><div>123</div></body></html>
行内元素
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>Title</title></head><body><!--一行可以有多个 span a em del ins --><!--宽高设置是无效的，默认宽度是本身内容的宽度--><!--行内元素只能放文本或者其他行内元素--><!--a标签里面可以放块级标签--><span>123</span><span>123</span><span>123</span><span>123</span></body></html>
行内块元素
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>Title</title></head><body><!--img input td--><!--有块级元素特点，也有行内元素特点--></body></html>
显示形式转换
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>Title</title><style>a{width: 100px;height: 50px;/*转换成块级元素*/display: block;background-color: red;}div{width: 100px;height: 50px;background-color: gold;/*转换成行内元素*/display: inline;}span{width: 100px;height: 50px;background-color: pink;/*转换为行内块元素*/display: inline-block;}</style></head><body><a href="#">大帅哥</a><div>我是块级元素</div><span>我是行内元素</span></body></html>
