基于CSS入门基础必备
CSS选择器:
标签选择器:
标签名{样式名1:样式值1;.......}
作用: 会将当前网页内的所有该标签增加相同的样式
id选择器:
#标签的id属性值{样式名1:样式值1;.......}
作用:给某个指定的标签添加指定的样式
类选择器:
.类选择器名{样式名1:样式值1;.......}
作用:给不同的标签添加相同的样式
全部选择器:
*{样式名1:样式值1;.......}
作用:选择所有的HTML标签,并添加相同的样式
----------------------------------------------------------------------------------
组合选择器:
选择器1,选择器2,.....{样式名1:样式值1;.......}
作用:解决不同的选择器之间重复样式的问题
子标签选择器:
选择器1 子标签选择器{样式名1:样式值1;.......}
属性选择器:
标签名[属性名=属性值]{样式名1:样式值1;.......}
作用:选择某标签指定具备某属性并且属性值为某属性的标签
CSS使用过程:
1.声明css代码域
2.使用选择器选择要添加样式的标签
根据需求:
使用*选择器给整个页面添加基础样式
使用类选择器给不同的标签添加基础样式
使用标签选择器来给某类标签添加基础样式
使用id,属性选择器,style属性声明的方式给某一个标签添加个性化样式
3.书写样式单
边框设置
border:solid 1px;
字体设置
font-size:10px设置字体的大小
font-family:"黑体"; (设置字体的格式)
font-weight:bold; (设置字体加粗)
字体颜色设置
color:颜色;
背景色设置
background-color:颜色;
背景图片设置
background-img:url(图片的相对路径)
background-repeate:no-repeate; 设置图片不重复
background-size:cover;图片平铺整个页面
宽高设置
浮动设置:
float:left; || float:right;
行高设置:
line-height:10;
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>css选择器</title>
<style>
/*标签选择器*/
table{
background-color: aquamarine;
border: solid 1px;
}
/*id选择器*/
#t1{
background-color: blue;
}
/*类选择器*/
.common{
width: 300px;
color: black;
height: 20px;
background-color: blueviolet;
}
/*全部选择器*/
/*
*{
background-color: crimson;
}*/
/*组合选择器*/
#t1,table{
width: 200px;
height: 200px;
}
/*子标签选择器*/
p a{
color: crimson;
}
/*属性选择器*/
table[id=t2]{
background-color: blueviolet;
}
</style>
</head>
<body>
<h3>css选择器</h3>
<br>
<hr class="common">
<hr>
<table id="t1" class="common">
<tr>
<td ></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
</table>
<table id="t2">
<tr>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
</table>
<p id="as">
<a href="http://www.baidu.com/">百度一下</a>
<a>360搜索</a>
</p>
</body>
</html>
CSS选择器的使用
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>css选择器使用</title>
<style>
table{
/* background-image: url("../img/1.jpg");
background-repeat: no-repeat;
background-size: cover;*/
}
body{
background-image: url("../img/1.jpg");
background-repeat: no-repeat;
background-size: cover;
}
td{
width: 100px;/*设置宽*/
color: yellow;/*设置文本的颜色*/
border: solid 1px red;/*设置边框的颜色和大小*/
border-radius:10px;/*设置表框的角度*/
text-align: center;/*设置文本位置*/
font-weight: bold;/*设置文本加粗*/
letter-spacing: 10px;/*设置字体间距*/
}
ul{
background-color: gray;
height: 50px;
}
/*使用属性选择器*/
li{
list-style-type: none;/*设置li标识符*/
float: left;/*设置菜单左浮动*/
/*display: inline; !*也表示设置去除li的小黑点或者空心原点等标识符*!*/
}
/*子标签选择器*/
li a {
color: blueviolet;
text-decoration: none; /*去掉超链接的下划线*/
font-weight: bold;/*加粗超链接文字*/
font-size: 20px;/*设置超链接内部标签字间距*/
margin-left: 20px;/*设置超链接标签的间距*/
}
</style>
</head>
<body>
<h3>css样式获取</h3>
<table>
<tr>
<td>姓名</td>
<td>学号</td>
<td>成绩</td>
</tr>
<tr>
<td>张三</td>
<td>101</td>
<td>88</td>
</tr>
<tr>
<td>李四</td>
<td>102</td>
<td>99</td>
</tr>
</table>
<ul>
<li><a href="http://www.baidu.com" target="_blank">百度</a></li>
<li><a href="http://www.jd.com" target="_blank">京东</a></li>
<li><a href="http://www.taobao.com" target="_blank">淘宝</a></li>
</ul>
</body>
</html>
显示效果
CSS制作照片墙
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>照片墙</title>
<style>
body{
background-color: aqua;
text-align: center;
}
img{
width: 200px;
height: 200px;
padding: 10px;
background-color: white;
margin: 30px;
transform: rotate(-10deg) ;/*设置*/
}
/*伪类选择器*/
img:hover
{
transform:rotate(0deg) scale(1.5);/*设置倾斜角度和缩放比例*/
z-index: 1;/*设置显示优先级别*/
transition: 1.5s;/*设置显示时间*/
}
</style>
</head>
<body>
<br>
<br>
<br>
<br>
<img src="../img/c8.jpg" alt="">
<img src="../img/c14.jpg" alt="">
<img src="../img/c9.jpg" alt=""><br>
<img src="../img/c4.jpg" alt="">
<img src="../img/c5.jpg" alt="">
<img src="../img/c10.jpg" alt="">
</body>
</html>
效果显示:
图片.png
网友评论