css基础知识

最新推荐文章于 2024-06-07 19:12:10 发布

maotingmaoting

最新推荐文章于 2024-06-07 19:12:10 发布

阅读量113

点赞数

分类专栏： css 文章标签： CSS HTML

css 专栏收录该内容

11 篇文章

订阅专栏

Css的几种设置方式
1.内联样式表（inline style sheets）：直接设置Html正文标签的style属性。
在使用内联样式表时，html4.01建议用户在</head></head>中加入<meta>标签，语句为：
<meta http-equiv=”Content-Style-type” content=”text/css”>
Eg:<body style=”FONT-SIZE:20px;COLOR:blue”></body>
2.嵌入样式表 (embedded style sheets):是在网页文档的头部(<head></head>标签对之间),定义一个<style></style>标签对中加入各种网页元素的样式规则定义，如下定义：
<head>
<style type=”text/css” media=”screen,projection”>

</style>
</head>
3．外部样式表 (linked style sheets):一个外部样式表文件（.css文件）可以通过html的<link>标签连接到html文档中。
首先编写一个test.css文件，文件内容如下：
P{FONT-SIZE：20pt;COLOR:blue}
接着编写一个要使用样式表文件的网页文件，假设网页文件与test.css文件放置在相同的目录下，网页文件的内容如下：
<head>
<link rel=”StyleSheet” href=”test.css” type=”text/css” media=”screen”>
</head>
<body>
<p>this is a css test</p>
</body>
4.输入样式表 (imported style sheets):可以使用CSS的@import声明将一个外部样式表文件（CSS文件）输入到另外一个CSS文件中，被输入的CSS文件中的样式规则定义语句，就成了输入到CSS文件的一部分。
<head>
<style type=”text/css” media=”screen,projection”>

</style>
</head>

Css样式规则的选择器
Selector {property:value; property:value; property:value;……}
1、【html标签选择器】
<style type="text/css">
p{
font-size:1cm;
color:green;
}
div{
font-size:2cm;
}
</style>
如何引用：
<p>dddddddd</p>
<div>ssssssss</div>
2、【类选择器】
<style type="text/css">
.one{
font-size:2cm;
}
.two{
background:green;
}
</style>
如何引用：
<div class="one">dsfsdfsdf</div>
<p class="two" > sfsdfsdf</p>
注：如果一个样式被多次调用，可以做成类选择器
3、【id选择器】
如：
<style type="text/css">
#one{
font-size:2cm;
}
#two{
background:green;
}
</style>
如何引用:
<div id="one"> sfsdfsdf</div>
<p id="two"> ssadfasdf</p>
注：如果一个样式只被且只调用一次，可把该样式做成id选择器
4、【关联选择器】
<style type="text/css">
p em{
color:red;
}
</style>
如何引用：
<p>
<em>sdfsdfsdf</em>
</p>
注：反之em标签包含p标签以上样式是不成立的
5、【组合选择器】
<style type="text/css">
p,div,h1,#one,.two{
color:red;
}
</style>
如何引用:
<p>ssssssss</p>
<div>aaaaaaa</div>
<h1>sdfdfdf</h1>
<div id="one">bbbbbbbbbbbbbb</div>
<div class="two">skkkkkkkkk</div>
注;以上标签都使用了同一种样式
6、【伪元素选择器】
<style type="text/css">
a:link{font-size:10cm;}
a:hover{font-size:5cm;}
a:visited{font-size:1cm;}
</style>

Css样式规则的优先级
总起来是：从上到下，从总提到局部。
ID选择器>CLASS选择器>HTML标签选择器
内联样式表>嵌入样式表>链接样式表

Css样式表中的注释：/*要注释的内容*/