css的选择器
作用范围越小越显示
css中/**/表示注释
css使用过程
-
声明css代码域：一般使用style（在head中）
-
使用选择器选择要添加样式的标签
根据需求来选择
a.使用*选择器给页面添加基础样式
b.使用类选择器给不同的标签添加基础样式
c.使用标签选择器给某类标签添加基础样式
d.使用id，属性选择器，style属性声明方式给某个标签添加个性化样式
都在style标签中写
标签选择器
标签名{样式名1: 样式值1;...}
作用：会将当前网页内的所有该标签增加相同的样式
table{
width:300px;
height:200px;
border:solid 1px;
background-color:red;
}
id选择器
#标签的id属性值{样式名1: 样式值1;...}
给某个指定的标签添加
t1表示第一个表格，要先在table中定义
#t1{
background-color:gray;
}
类选择器
.类选择器名{样式名1: 样式值1;...}
作用：给不同的标签添加相同的样式
.common{
color:yellow;
}
全部选择器
*{样式名1: 样式值1;...}
作用：选择所有html标签并添加相同的样式
组合选择器
选择器1,选择器2,......{样式名1: 样式值1;...}
作用：解决不同的选择器之间重复样式的问题
.common,table{
background-color:blue;
}
子标签选择器
选择器1 子标签选择器{样式名1: 样式值1;...}
将所有ul中的li中的a变为黑色
要想将一个变为其他的，就用id标签
ul li a{
color:black;
}
属性选择器
标签名[属性名=属性值]{样式名1: 样式值1;...}
作用：选择某标签指定具备某属性并且属性值为某属性值的标签
input[type=text]{
background-color:red;
}
eg
<html>
<head>
<title>css的选择器学习</title>
<meta charset="UTF-8"/>
<style type="text/css">
table{
width:300px;
height:200px;
border:solid 1px;
background-color:red;
}
#t1{
background-color:gray;
}
.common{
color:yellow;
}
.common,table{
background-color:blue;
}
ul li a{
color:black;
}
input[type=text]{
background-color:red;
}
</style>
</head>
<body>
<h3>css的选择器学习</h3>
<hr />
<hr />
<table id="t1">
<tr>
<td></td>
</tr>
<tr>
<td></td>
</tr>
</table>
<table>
<tr>
<td></td>
</tr>
<tr>
<td></td>
</tr>
</table>
<b>css学习</b>
<hr />
<ul>
<li><a href="">哈哈</a></li>
<li><a href="">呵呵</a></li>
<li><a href="">哦哦</a></li>
</ul>
<a href="">嘻嘻</a>
<hr />
<input type="text" />
<input type="password" />
</body>
</html>
书写样式单
-
边框 border:solid 1px; 表示实线
-
字体
font-size:10px; 设置字体大小
font-family:"黑体"; 设置字体格式
font-weight:bold; 设置字体加粗
color:颜色 设置字体颜色
-
背景图片
background-img:url(图片的相对路径);
background-repeate:no-repeate; 设置图片不重复
background-size:cover; 图片平铺整个页面
-
背景颜色 background-color:颜色;
-
高宽
-
浮动 float:left/right;
-
行高 line-height:10;