html样式
style=“color:red ;”style属性的书写称为行内样式 也叫内联样式 只负责当前标签的外观
<span style="color:red ;">span</span>
css
2. style(写在head里面)
优先级低于行内样式
内部样式表
选择器用于选择标签
在 选择器{属性名：属性值；} 中编写样式语句
<style>span{color: blue;}
外部样式表选择器选择标签选择器{属性名：属性值；}中编写语句在head使用link标签把css引入html 优先级低于内部样式表
<link rel="stylesheet" href="./css/mian.css">
一般情况优先级：外部样式表<内部样式表<行内样式表作用范围：外部样式表>内部样式表>行内样式
css常用的15个属性
color文字颜色backgroun
背景颜色margin
外边距padding
内补border
边框border-radius
圆角text-decoration：none
取消下划线text_align
文本居中font-size
文本大小font-weight
文本粗细（不带单位）width
宽度height
高度lin-height
行高 line-height=height 文本垂直居中list-style
排列符号样式display
显示框类型cursor
鼠标样式vertical-align
单元格对其方式
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>*{vertical-align: top;}.no1{color: rgb(201, 168, 124);background-color: brown;padding: 10px;margin: 10px;font-size: 20px;}.no2{color: lightblue;border: 5px solid goldenrod;font-weight: 700;width: 60px;height: 80px;line-height: 80px;border-radius: 30%;}li{list-style: none;display: inline-block;}a{text-decoration: none;}</style></head><body><div><ul><li class="no1"><a href="">属性1</a></li><li class="no1"><a href="">属性2</a></li><li class="no1">属性3</li><li class="no2">属性4</li><li class="no2">属性5</li><li class="no3" style="">属性6</li></ul></div></body></html>
style内部样式表
通配符*h1 span div…标签选择器class
类名选择器（.类名{}）id
id选择器（#id{}）
优先级：id>class>h1,span…>*
margin与padding
一个参数：10px
上下左右
2个参数 ：10px 20px
上下 左右
三个参数：10px 20px 30px
上 左右 下
四个参数：10px 20px 30px 40px
上 右 下 左
margin使用父元素的颜色
padding使用自己的背景色
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>*{margin: 0;padding: 0;background-color: aquamarine;}.block{width: 300px;height: 300px;border-left: 20px solid white;border-bottom: 30px solid black;border-right: 20px solid white;border-top: 30px solid black;margin: 10px 20px;padding: 10px 20px ;background-color: blueviolet;}img{width: 100%;height: 100%;border-radius: 50%;}</style></head><body><div class="block"><img src="./img/demo.jpg.crdownload" alt=""></div></body></html>
