首页 > 代码库 > CSS相关

CSS相关

2024-10-22 02:05:02   209人阅读

CSS stands for Cascading Style Sheets
– CSS 意思就是 层叠样式表
? Styles define how to display HTML elements
– 样式定义了HTML元素怎样去显示
? Styles are normally stored in Style Sheets
– 样式一般存储在样式表中
? Styles were added to HTML 4.0 to solve a problem
– 样式添加到HTML4.0中用来解决问题
? External Style Sheets can save you a lot of work
– 利用外部样式表可以提高你的工作效率
? External Style Sheets are stored in CSS files
– 外部样式表存储在CSS文件中
? With CSS, your HTML documents can be displayed using different output styles

? 样式表定义元素怎样去显示.外部样式表能够让你改变所有出现在你WEB中的外观和布局,而仅仅通过编辑一个单独的CSS文档.(原理就是一动多变)
? CSS是一个在设计领域中的突破,因为它允许开发者一下就能控制多个WEB页的样式和布局.作为一名WEB开发者你可以为每个HTML元素和应用他的每个页面定义一个你想要的样式.

来实现全面的改变,简单的改变样式,所有与之相关的元素都会自动更新

? 样式表允许样式信息用多种方式来定义.样式可以在一单独的HTML元素中指定,在<head>元素中或在一外部CSS文件中.甚至多个外部样式表能集中在一个单一的HTML文档中

当多于一种的样式指定一HTML元素时使用怎样的样式呢? 
一般说来所有样式有下面的规则(第四个
最有优先性)
1. Browser default
浏览器默认
2. External style sheet
外部样式表(css文件)
3. Internal style sheet (inside the<head> tag)
内嵌样式表(在<head>标签内)
4. Inline style (inside an HTML element)
行内样式(在一HTML元素内)
所以写在HTML元素中的样式有最高的优先权(写在HTML元素内的),它会替代其他形式的样式
CSS语法：
The CSS syntax is made up of three parts: a selector, a property and a value:
– CSS的语法由三部分组成: 一个选择器，一个属性和一个值，例如：selector {property: value}

选择器是你希望去定义的HTML元素/标签，每个属性可以有一个值，属性和值由冒号区分开外面用大括号括起来

body {color: black}

如果值为多个单词则用双引号括起来:p {font-family: "sans serif"}
? 注意：如果你想指定多个属性，你就必须将每个属性用分号隔开，下面的例子就演示了怎样定义居中红色文字段落

p {text-align:center;color:red}

? 为了让样式定义更有可读性，你可以像这样分行描述属性

p{
    text-align: center;
    color: black;
    font-family: arial
}

? 你可以将选择器组合。用逗号分隔每个选择器。下的例子将所有的标题元素组合起来，它们的颜色都变为绿色

h1,h2,h3,h4,h5,h6 { color: green }

选择器类：

? 用选择器类你可以将同一类型的HTML元素定义出不同的样式。比如你想在你的文档中有两种不同样式的段落：一种是右对齐，另外是居中的。这就告诉你该怎么用样
式来做到这点：right,center是自定义的！

p.right {text-align: right}
p.center {text-align: center}

? 你必须在你的HTML文档中使用类属性（才能显示出效果）

<p class="right"> This paragraph will be right-aligned. </p>
<p class="center"> This paragraph will be center-aligned. </p>

注意：每个HTML元素只能有一个类属性，下面的例子是不符合规范的

<p class="right" class="center">This is a paragraph.</p>

? 你也可以省略标签名称直接去定义，这样就可以在所有的HTML元素中使用了。下面的例子就能让所有HTML中所有带class="center"的元素居中文字：.千万不要省

.center {text-align: center}

? 下面的代码中H1和P元素都有class="center"。这就意味着这两个元素都将遵循选择器"center"的规则

<h1 class="center"> This heading will be center-aligned </h1>
<p class="center"> This paragraph will also be center-aligned. </p>

id选择器

? 使用id 选择器你可以为不同的HTML元素定义相同的样式
? 下面的样式规则对任何一个带有id属性值为"green"的元素都是匹配的

#green {color: green}

? 上面的规则将匹配h1和p元素

<h1 id="green">Some text</h1>
<p id="green">Some text</p>

? 下面的样式规则将匹配任何一个带有id属性值为"green"的p元素

p#green {color: green}

? 上面的规则与h1元素不匹配（也就是说不会产生样式效果）

<h1 id="green">Some text</h1>

? 和class一样,id的名称的开头也不要使用数字,不然就无法在Mozilla/Firefox中正常运作了

CSS注释

? 你可以在CSS中加入解释代码用的注释，这样可以方便你以后重新编辑代码。浏览器会忽略注释，注释一般以"/*"开头"*/"做结尾，像这样：

/* This is a comment */
p {
    text-align: center;
    /* This is another comment */
    color: black;
    font-family: arial
}

怎么使用CSS

? 怎样插入样式表？
– 当浏览器阅读样式表，它会依据它（样式表）来格式化文档。有三种方法可以插入样式表
? 外部样式表（External Style Sheet）
? 内嵌样式表（Internal Style Sheet）
? 行内样式（Inline Styles）

外部样式表：
? 使用外部样式表是使样式应用于多张网页的理想方法。通过这个方法你只需改动一个文件就能改变整个网站的外观。使用<link>标签让每个页面都连接到样式表。 <link>标签在head区域使用

<head>
<link rel="stylesheet" type="text/css" href="mystyle.css" />
</head>

浏览器将从mystyle.css文件中读取样式定义信息，并依据它来格式化文档

? 外部样式表可以用任何一个文字编辑器来书写。文件不应该包含任何的html标签。并保存为一个后缀为.css的文件.下面是一个样式表文件的内容

hr {color: sienna}
p {margin-left: 20px}
body {background-image:url("images/back40.gif")}

内嵌样式表：

? 一份内嵌样式表应该在当有单独文档有特殊样式的时候使用。使用<style>标签在head区域内定义样式，像这样

<head>
    <style type="text/css">
        hr {color: red}
        p {margin-left: 20px}
        body {background-image: url("images/back40.gif")}
    </style>
</head>

? 浏览器将立即读取样式定义，并依据它来格式化文档。
? 注意：浏览器一般会忽略未知的标签。这就意味着老的浏览器不能支持样式，会忽略<style>标签，但<style>里的内容会显示在页面上。在HTML注释元素中隐藏它
可以来避免这类情况在老的浏览器中发生

行内样式：

? 使用行内样式就失去了样式表的优势而将内容和形式相混淆了。一般这类方法在个别元素需要改变样式的时候使用
? 在相关的标签上用style属性来加入行内样式。样式属性可以包含任何CSS属性。例子中将展示怎样给一个段落加上左间距并将颜色改为red

<p style="color: red; margin-left: 20px"> This is a paragraph </p>

CSS相关


联系
我们