css学习

来源：互联网发布：wine 网络编辑：程序博客网时间：2024/05/17 03:33

1. css学习

CSS 指层叠样式表 (Cascading Style Sheets)
样式定义如何显示 HTML 元素
样式通常存储在样式表中
把样式添加到 HTML 4.0 中，是为了解决内容与表现分离的问题
外部样式表可以极大提高工作效率
外部样式表通常存储在 CSS 文件中
多个样式定义可层叠为一

css显示修饰每个标签，然后最终达到整体的页面效果

1.1. 语法

选择器{属性：属性值；属性：属性值；属性：属性值；。。。。。。}

基础选择器

标签名选择器：根据标签的名字去判断；

id选择器：根据标签中的id的属性去判断

class选择器：根据标签中的class属性，去判断的。

选择器：就是告诉浏览器，我这个ccs是修饰哪个html的标签。

属性：具体的显示效果。

1.1.1. css的引用

l 内联样式- 在HTML元素中使用"style"属性

/*缺点：内联样式确定，只能作用一个标签*/

<!DOCTYPEHTMLPUBLIC"-//W3C//DTDHTML 4.01 Transitional//EN">

<html>

<head>

<title>03css的使用.html</title>

<metahttp-equiv="content-type"content="text/html; charset=UTF-8">

</head>

<body>

<pstyle="font-size:19px;font-family:楷体;color:red">这是p里面的内容</p>

</body>

</html>

l 内部样式表 -在HTML文档头部<head> 区域使用<style> 元素来包含CSS

/*缺点：内部样式，只能作用在一个html文件中。*/

<!DOCTYPEHTMLPUBLIC"-//W3C//DTDHTML 4.01 Transitional//EN">

<html>

<head>

<title>03css外部引用样式使用.html</title>

<metahttp-equiv="content-type"content="text/html; charset=UTF-8">

<styletype="text/css">

/*p表示作用在p标签上，这是标签名选择器*/

{

color:red;

font-family:楷体;

font-size:32;

}

</style>

</head>

<body>

<p>这是paragraph</p>

</body>

</html>

l 外部引用 - 使用外部 CSS 文件

需要在html中的link标签去引入外部css文件，通过href属性找到外部css文件的位置。

<!DOCTYPEHTMLPUBLIC"-//W3C//DTDHTML 4.01 Transitional//EN">

<html>

<head>

<title>04css内部样式.html</title>

<metahttp-equiv="content-type"content="text/html; charset=UTF-8">

<linkrel="stylesheet"type="text/css"href="demo1.css">

<styletype="text/css">

/*p表示作用在p标签上，这是标签名选择器*/

</style>

</head>

<body>

<p>这是p里面的内容</p>

<p>另外的内容</p>

<div>这是div里面的内容</div>

</body>

</html>

1.1.2. 基础选择器

标签名选择器：根据标签的名字去判断；

语法：

标签名｛

属性：属性值；

多个。。。。。。

｝

不足：

作用所有的标签名相同的标签。

==========================================

id选择器：根据标签中的id的属性去判断

#id值{

属性：属性值；

多个。。。。。。

}

id值对应的是标签中id属性的值；

=========================================

class选择器：根据标签中的class属性，去判断的。

语法：

.className｛

属性：属性值；

多个。。。。。。

｝

======注意：

这是属性相同的作用的优先级别：

id选择器》class选择器》标签名选择器；

1.1.3. 伪类的使用

伪类：根据标签的各种状态，去修饰标签的样式。

语法：选择器：伪类｛属性：属性值；。。。。。｝

a:link {color:#FF0000;} /* 未访问的链接 */
a:visited {color:#00FF00;} /* 已访问的链接 */
a:hover {color:#FF00FF;} /* 鼠标悬停链接 */
a:active {color:#0000FF;} /* 已选中的链接 */

注意： 在CSS定义中，a:hover 必须被置于 a:link 和 a:visited 之后，才是有效的。

注意： 在 CSS 定义中，a:active 必须被置于 a:hover 之后，才是有效的。

注意：伪类的名称不区分大小写

注意：hover这个伪类，其他的标签也可以使用。

1.1.4. 边框属性----盒子模型

边框----border：定义边框

外边距------margin

1.1.5. float浮动属性的使用

float属性作用：告诉浏览器该标签是否浮动，以及如何浮动。：：：目的：布局

0 0