您的位置：首页 > Web前端 > CSS

CSS学习笔记（一）

2016-04-05 15:07 411 查看
CSS：层叠样式表
(Cascading Style Sheets)，主要是用于定义HTML内容在浏览器内的显示样式。如文字大小、颜色、字体粗细等。

使用CSS样式的小栗子：

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8">
<title>认识css样式</title>
<style type="text/css">
p{
font-size:18px;
color:blue;
font-weight:bold;
}
</style>
</head>
<body>
<p>枯藤老树昏鸦，小桥流水人家，古道西风瘦马，夕阳西下，断肠人在天涯！</p>
</body>
</html>


css 样式由选择符和声明组成，而声明又由属性和值组成。

选择符：又称选择器，指明网页中要应用样式规则的元素，如上例中在style标签内的段落元素（p）。

声明：在英文大括号“｛｝”中的就是声明，属性和值之间用英文冒号“：”分隔。当有多条声明时，中间可以英文分号“;”分隔，如下：
p{font-size:18px;
color:blue;
font-weight:bold;
}


与Html的注释不同（Html中使用<!--注释-->)，在CSS中注释语句：用/*注释*/来标明。

CSS样式：

内联式css样式表：就是把css代码直接写在现有的HTML标签中，如下面代码：
<strong><p style="color:red">人生若只如初见</p></strong>


嵌入式css样式：就是可以把css样式代码写在<style type="text/css"></style>标签之间。如下面代码实现把三个<span>标签中的文字设置为红色：
<strong><style type="text/css">
p{
color:blue;
}
</style></strong>


外部式css样式(也称外联式)：就是把css代码写一个单独的外部文件中，这个css样式文件以“.css”为扩展名，在<head>内（不在<style>标签内）使用<link>标签将css样式文件链接到HTML文件内，如下代码：

<span style="font-size:12px;font-family: SimHei;"> </span><strong><span style="font-size:14px;font-family: SimHei;"> </span><span style="font-family: 'Courier New'; font-size: 12px;"><link href="test.css" rel="stylesheet" type="text/css" /></span></strong>


注意：


rel="stylesheet" type="text/css" 固定写法不可修改。

当同时引用三种样式时，三种样式的优先级：内联式 > 嵌入式 > 外部式 （嵌入式优先级高于外部式
的前提：嵌入式css样式的位置一定在外部式的后面
）
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航