div+css学习1

最新推荐文章于 2024-05-05 02:50:11 发布

leikey

最新推荐文章于 2024-05-05 02:50:11 发布

阅读量225

点赞数

分类专栏： Div+Css 文章标签： css div stylesheet class 嵌入式 html

本文链接：https://blog.csdn.net/leikey/article/details/5535176

版权

Div+Css 专栏收录该内容

14 篇文章 0 订阅

订阅专栏

内联式样式表

定义：直接对html标签写样式，缺点：如果标签过多，需要写过多的样式
公式：style="样式属性:属性的值；样式属性:属性的值"
<p style="font-size:50px">aaaaaaaaa</p>

嵌入式样式表

特点：将公共的样式写在“head”部分里面的。缺点:如果加载样式的页面多，需要写重复内容。
公式：<style type="text/css">

      </style>

</head>

</html>

外部样式表

写在head里面的<link>标签中，可以将外部的标签导入到本页面中。
如：<link rel="stylesheet" type="text/css" href="css.css">
页面的其他地方同嵌入式css

其中css.css内容为，去掉了style标签的部分，如下：
p {font-size:3cm;
   color:red;
   background-color:green;
   text-decoration:underline;
}

输入样式表
将一个css样式表导入到另外一个css样式表中，如：有两个css样式表，叫：css.css 和demo.css 在css.css导入demo.css，可在css.css写入：
@import url(demo.css)

样式规则的选择器
1.HTML选择器
直接修改html标签，如：p，div，h1等
2.类选择器 ----- 一对多
如：
公式：标签.类名字{}
p.z1{ xx1 } ---只能在p标签中使用z1样式
p.z2{ xx2 }
p.z3{ xx3 }
p.z4{ xx4 }
.z5{ xx5 } ---类的名字前面不加标签，就表示所有的标签都能够使用，这也是最常用的类标签

应用：
<p class="z1">aaaaaaaaaaaaa</p>
<p class="z2">bbbbbbbbbbbbb</p>
<p class="z3">ccccccccccccc</p>
<p class="z4">ddddddddddddd</p>
3.id 选择器
id在同一个页面是不能重复的,在下面的使用中，只能一个被调用----- 一对一
如：
上面部分：
<style>

</style>
下面部分：
<a id="one">aaaaaaaaaaaaaa</a>
这个id只能在这个a标签中使用，其他标签不能使用，注意：是唯一的，只能一对一使用。
<p id="two">qqqqqqqqqq</p>

4.关联选择器
用“空格”隔开
将标签进行关联，em标签必须写在p标签里面才能生效
例1.上面部分：
p em{font-size:3cm;color:red;}
下面部分：
<p>
<em>aaaaaaaaaaa</em>
</p>
例2.
上面部分：
#one .two em{font-size:3cm;color:red;}
下面部分：
<center id="one">
<p class="two">
<em>aaaaaaaaaaa</em>
</p>
</center>
5.组合选择器
用“，”隔开
上面部分：
#one,.two,em,p,div{font-size:3cm;color:red;}
#one,.two,em,p,div都可以使用这个样式
6.伪元素选择器
a标签有伪元素
<style>

</style>