day1-css
CSS样式
CSS是用来增强/控制网页样式信息与网页内容分离的一种标记性语言
CSS语法规则
选择器{介值对}
选择器{
属性:属性值;
属性:属性值;
}
CSS注释、/* 注释内容 */
css和HTML结合的方式
1、在HTML标签的style属性中设置"key:value value ;"
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div style="border:1px solid red; ">样式设置测试</div>
</body>
</html>
缺点:样式多了以后不好排,代码复用性差
2、在head标签中使用style标签定义自己需要的才CSS样式
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>CSS测试</title>
<style type="text/css">
div{
border:1px solid red;
}
</style>
</head>
<body>
<div>css test</div>
<div>css test</div>
<span>css test</span><br/>
<p>css test</p>
</body>
</html>
3、单独写下CSS文件中,在HTML文件中通过link标签引用CSS文件,加强了代码的复用性
<link rel="stylesheet" type="text/css" href="./css1.css"/>
css页面
div{
border:1px solid red;
}
CSS选择器
1、标签名选择器–决定哪些标签被动的使用这个样式
标签名{
属性:属性值;
}
div{
border:1px solid yellow;
font-szie:30px;
color:blue;
}
span{
color:yellow;
border:5px dashed blue;
font-size:20px;
}
2、id选择器–通过id属性选择器去使用这个样式
#id属性值{
属性:属性值;
}
#id1{
color:green;
font-size:40px;
border:1px solid blue;
}
3、class选择器(类选择器)
.class属性值{
属性:属性值;
}
.class1{
color:blue;
font-size:30px;
border:1px solid yellow;
}
注:id不可以重复,但是class可以重复
4、组合选择器–让多个选择器共用一个CSS代码,实现代码的复用性
选择器1,选择器2,…选择器n{
属性:属性值
}
.class1,#id1{
color:blue;
font-size:20px;
border:1px solid yellow;
}
css的常用样式
div居中,块相对与页面居中
div{
/* 让div居中,需要设置边框的左右边距*/
margin-left:auto;
margin-right:auto;
/*文本居中*/
text-align:center;
}
a{
/*超链接去掉下划线*/
text-decoration:none;
}
table{
/*表格细线*/
border:1px green solid;/*设置边框*/
border-collapse:collapse;/*将边框合并*/
}
td{
/* 单元格边框*/
border:1px solid black;
}
ul{
/*去掉列表前的符号*/
list-style: none;
}