整合营销服务商
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
d 和 class 选择器
如果你要在HTML元素中设置CSS样式，你需要在元素中设置”id” 和 “class”选择器。
id 选择器可以为标有特定 id 的 HTML 元素指定特定的样式。
HTML元素以id属性来设置id选择器,CSS 中 id 选择器以 “#” 来定义。
以下的样式规则应用于元素属性 id=“para1”:
#para1
{
text-align:center;
color:red;
}
id 属性不要以数字开头，数字开头的ID在 Mozilla/Firefox 浏览器中不起作用。
class 选择器用于描述一组元素的样式，class 选择器有别于id选择器，class可以在多个元素中使用。
class 选择器在HTML中以class属性表示, 在 CSS 中，类选择器以一个点”.“号显示:
.center {text-align:center;}
在上面的例子中，所有拥有 center 类的 HTML 元素均为居中。
你也可以指定特定的HTML元素使用class。
在以下实例中, 所有的 p 元素使用 class=“center” 让该元素的文本居中:
p.center {text-align:center;}
CSS Id 和 Class选择器
.选择器 标签选择器 类选择器和id选择器
2.属性
3.属性值
<.red>类样式
<id>是html中唯一的不能重复的标签
定义样式和应用样式
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>css基本选择器</title>
<style type="text/css">
li{
font-size: 18px;
color: blue;
font-family: 黑体;
}
.red{
color: red;
}
#orange{
color:orange;
}
</style>
</head>
<body>
<div>
<ul>
<li class="red">王媛</li>
<li id="orange">刘春晓</li>
<li>刘晓旭</li>
<li>李静雯</li>
<li>巫清清</li>
</ul>
</div>
</body>
</html>
择器与样式的设置暂时全部写在<style></style>标签中;/**/表示注释
CSS常用属性设置
1)CSS的计量单位
在CSS中表示宽度,距离时最常用的计量单位：1)px(像素)2)30%(百分比)3)em相对单位)
2)常用选择器
2.1标签(元素)选择器;例如body,input,ul,img,a等等
设置文本框样式;还有可以设置其很多样式不再细说
2.2类选择器:为指定元素添加一个class属性,此属性值为样式的名称,如果一个元素有多个class,其名称之间加空格;在style标签中类名前面加点"."
设置li样式
2.3id选择器:为指定元素添加一个id属性,此属性值为样式的名称,在style标签中此名称前面加点"#"一般用于Javascript中选择指定元素进行操作
消除li前面的样式
有关li前面样式的类型
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
<link href="1.css" rel="stylesheet" />
<title>层叠样式表</title>
<style type="text/css">
/*1 标签选择器*/
input {
/*边框宽度,类型(实线,虚线等),颜色*/
border: 1px solid red;
/*文本框的宽高*/
width: 200px;
height: 50px;
/*文本框背景颜色*/
background-color: burlywood;
/*文本框内容的颜色*/
color: rgb(44, 11, 226);
/*文字大小*/
font-size: 20px;
/*文字类型*/
font-family:Arial;
/*文字居中显示*/
text-align:center;
}
li{ /*先统一为li设置一个样式,下面的类选择器中为具体li单独设置样式*/
border: 1px solid red;
width: 150px;height: 30px;
padding:10px; /*li之间的距离*/
margin: 10px; /*文字到li边框的距离*/
}
/*2 类选择器*/
.c1{ /*名称暂时随便起的,每个公司都有自己具体的命名规范*/
border: 1px solid black;
font-size: 25px; /*文字大小*/
color: chartreuse; /*文字颜色*/
}
.c2{
border: 1px solid green;
font-size: 20px;
text-align: center; /*文字按照li设置的宽度居中显示*/
color:chocolate;
}
#id1{
/*将li前面的符号消除*/
list-style:none;
}
</style>
</head>
<body>
<ul>
<li class="c1">公司首页</li>
<li class="c2">公司简介</li>
<li id="id1">产品展示</li>
<li>人才招聘</li>
<li>联系我们</li>
</ul>
用户名:<input type="text" value=""></input>
</body>
</html>CSS其他的选择器以后遇到再说,样式的有关属性及其值太多不再一一细说,以后遇到时通过例题再说
*请认真填写需求信息，我们会在24小时内与您取得联系。
