Html5入门第二篇-初识css

最新推荐文章于 2024-10-03 21:16:18 发布

Kurt-Nirvana

最新推荐文章于 2024-10-03 21:16:18 发布

阅读量384

点赞数

分类专栏： Html5心得总结文章标签： html5 html css 标签

本文链接：https://blog.csdn.net/u010532761/article/details/50393749

版权

Html5心得总结专栏收录该内容

5 篇文章 0 订阅

订阅专栏

css 是html开发中重要的一个部分，中文释义为层叠样式表，主要作用就是对页面进行渲染美化，通常意义上来讲，可以写一个. css后缀的文件，把对标签样式的设定以特定格式放到这个文件中，然后通过引用调用文件中的配置。

css的使用通常有这几种方法：

1、通过<link>标签引用外部样式

2、通过<style>标签引用

3：通过标签的style属性引用

下面来看一下事例：

这两句的作用是相同的，且都是要放到<head>标签中使用。解释下（REL属性用于定义连接的文件和html文档之间的关系。StyleSheet，的意思就是样式调用）

我们从实例总分析：

先写一个html文件用上面的两种引用任选一种。（my_css01.css 是指的本html同名目录下的对应的css文件。如果不是在同名目录...上一篇讲过）

class=“**”是什么意思呢。我们看看css文件就知道了。

看下面的css文件，我们基本就能看明白了，class对应的属性值在css中都有对应的属性与之对应，这样通过这个指向就为div设置了样式。

值得注意的是 div有 id属性，还有一个class 属性，class属性是为css指向使用的，id是html自身使用的。

@charset "utf-8"; 这里设置编码格式
/* CSS Document */
*{margin:0; padding:0;}
.one,.two,.three,.four,.go{margin:0 auto;}
.one{width:1000px;height:66px;background:yellow;}
.two{width:1000px;height:423px;background:blue;}
.three{width:1000px;height:336px;background:pink;}
.four{width:1000px;height:384px;background:green;}
.go{width:1000px;height:229px;background:red;}

css的另一种用法可以直接写到style属性中，如下：

<p style="width:1000px;height:100px;background:#aa00aa;margin:0 auto"></p>

@charset "utf-8";
/* CSS Document */
*{margin:0;padding:0;} /* *通配符*/
.fiv,.sit,.sev,.eig,.ni,.ten{margin:0 auto;}/*群组选择器*/
.fiv{width:1000px;height:10px;background:#aa0000;} （fiv sev 是html文件中有对应对象的class属性值）
.sev{width:1000px;height:10px;background:blue;} /*class选择器*/
#eig{width:1000px;height:10px;background:#333333;margin:0 auto;}/*id选择器*/ （eig是一个标签的id属性值）
#mydiv p{ /*包含选择器 -->mydiv模块内部的所有p标签的设置*/
width:1000px;height:50px;background:blue;
}

a{ /*元素选择符*/
font-size: 20px;
color: red;
text-decoration : blink;
font-weight: bold;
}

.ni{width:1000px;height:10px;background:red;}
.ten{width:1000px;height:10px;background:red;}
a:link{color:red} /*伪类选择器*/
a:visited{color:black}
a:hover{color:yellow}