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>
版权声明：本文为m0_53404077原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。