当前位置 博文首页 > 超超加油的博客：CSS基础一则（1）
美化页面
<p style="color: red;">文本内容</p> /* 写在head标签里 */
<style>
p {
color: red;
}
</style>
/* 在head标签下引入，index.css为外部样式表 */
<link rel="stylesheet" type="text/css" href="index.css">
选择器 {属性： 值; 属性： 值; ...} // 用分号
完整属性推荐看w3school： https://www.w3school.com.cn/css/css_list.asp
div {
width: 100px; // 宽
height: 100px; // 高
line-height: 100px; // 行高
background-color: #fff; // 背景色设置
background-image: url(); // 背景图片
background-size: 100% 100%; // 背景图片大小
text-align: center; // 文字居中显示 left， right
font-size: 16px; // 字体大小
font-family: 微软雅黑; // 字体
font-style: normal; //italic 斜体
font-weight: bold; //加粗，默认 normal
color: #000; // 文字颜色
opacity: 0.4; //透明度
margin: 10px 20px; //外间距 margin-top/margi-bottom/margin-left/margin-right
padding: 10px; //内边距 也可设置四个方向，同margin
float: left; //浮动
visibility： none; //可见
position: relative | absolute | fixed; //定位
left: 20px; // 同position配合使用
bottom: 10px; // 同上
}
标签名 {}.类名 {}#ID名 {}* {} 对页面所有元素起作用父元素 子元素 {}元素1, 元素2 {}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
// 标签选择器
p {
color: red;
font-size: 16px;
}
// 类选择器
.p1 {
color: blue;
font-size: 16px;
}
// ID选择器
#p1 {
color: blue;
font-size: 16px;
}
// 通配符选择器
* {
color: #fff;
}
// 后代选择器，对div下的p标签起作用
div p {
color: #fff;
}
// 对类名为p1和类名为p2的起作用
.p1, .p2 {
color: #fff;
}
</style>
</head>
<body>
<div>
<p>我是标签选择器</p>
<p class="p1">我是类选择器</p>
<p class="p2">我是类选择器</p>
<p id="p1">我是ID选择器</p>
</div>
</body>
</html>
a:link {
...
}
a:hover {
//常用
}
a:visited {}
a:active {}
input:focus {}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
div {
background-color: red;
}
span {
background-color: blue;
}
</style>
</head>
<body>
<div>我自己占一行</div>
<input type="text" value="111">
<input type="text" value="2222">
<span>aaaa</span>
<span>22222</span>
<span>33333</span>
</body>
</html>
<style>
div {
background-color: red;
width: 100px;
}
input {
width: 300px;
}
span {
background-color: blue;
width: 100px;
}
</style>
三种类型可以互相转换，block: 块级元素， inline-block: 行内块yuansu, inline: 行内元素
display: block | inline-block | inline
color: red !important;