首页 > 代码库 > CSS学习

CSS学习

2024-07-07 20:46:45   224人阅读

1、CSS简介与作用

CSS是英语Cascading Style Sheets（层叠样式表单）的缩写，用来表现HTML或XML等文件样式。CSS目前最新版本为CSS3，是能够真正做到网页表现与内容分离的一种样式设计语言。相对于传统HTML的表现而言，CSS能够对网页中的对象的位置排版进行像素级的精确控制，支持几乎所有的字体字号样式，拥有对网页对象和模型样式编辑的能力，并能够进行初步交互设计，是目前基于文本展示最优秀的表现设计语言。

2、CSS使用方法

有三种方法可以在站点网页上使用样式表：

外部样式：将网页链接到外部样式表。

<head >
    <link rel="stylesheet" type="text/css" href="http://www.mamicode.com/css文件所在地址" />

</head>

内页样式：在网页上创建嵌入的样式表。

<head >
    <style type="text/css">
        h1 {
            font-family: SimSun;
            font-size: 12px;
            font-style: normal;
        }
    </style>

</head>

行内样式：应用内嵌样式到各个网页元素.

<div style="font-family:SimSun;font-size:12px">

使用了行内样式div

</div>

3、CSS语法

CSS规则由两个主要部分构成：选择器+一条或多条声明

selector

{

declaration1;

declaration2;

……

}

每条声明由一个属性和一个值组成：{property:value};声明之间用分号“；”分割

4、选择器介绍

4.1 派生选择器：依据元素在其位置的上下文关系来定义样式

比方说，你希望列表中的 strong 元素变为斜体字，而不是通常的粗体字，可以这样定义一个派生选择器：

li strong {
    font-style: italic;
    font-weight: normal;
  }
<p><strong>我是粗体字，不是斜体字，因为我不在列表当中，所以这个规则对我不起作用</strong></p>

<ol>
<li><strong>我是斜体字。这是因为 strong 元素位于 li 元素内。</strong></li>
<li>我是正常的字体。</li>
</ol>
4.2 id选择器：以 "#" 来定义，通过HTML元素的id属性进行关联
#red {color:red;}
#green {color:green;}
<p id="red">这个段落是红色。</p>
<p id="green">这个段落是绿色。</p>

4.3 类选择器：类选择器以一个点号显示，通过HTML元素的class属性进行关联

.center {text-align: center}
<h1 class="center">
This heading will be center-aligned
</h1>
注意：类名的第一个字符不能使用数字！

4.4 属性选择器：为拥有指定属性的 HTML 元素设置样式

注释：只有在规定了 !DOCTYPE 时，IE7 和 IE8 才支持属性选择器。在 IE6 及更低的版本中，不支持属性选择。

为带有 title 属性的所有元素设置样式：

[title]
{
color:red;
}
为 title="W3School" 的所有元素设置样式：
[title=W3School]
{
border:5px solid blue;
}
4.5 标签选择器：直接使用HTML标签作为选择器
p{border:5px solid blue; }
更多详情，请参照：http://www.w3school.com.cn/css/css_pseudo_elements.asp
 


联系
我们