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

css1

2016-06-05 14:46 288 查看

CSS指的是层叠样式表，样式通常存储在样式表中，为了解决内容和现象分离的问题。

当为HTML元素加上样式的时候，直接写，也就是内联（内嵌）样式，会使代码区域过于冗长和杂乱，如：

<body>

<h1 style="color:red; font-size: 48px; background: #ccc;">haha</h1>

</body>

改善一下就变成了内部样式，是这样滴：

<head>

<title>my css</title>

<style>

h1{

color:red;

font-size:48px;

background:#ccc;

}

</style>

</head>

<body>

<h1>haha</h1>

</body>

虽然body中简洁了不少，可是全部堆积在head中，于是另一种方法应运而生，外部样式：

<head>

<meta charset="utf-8">

<link rel="stylesheet" href= "style1.css" >

<title>this is the fisrt css</title>

</head>

<body>

<h1>welcome! sir</h1>

</body>

其中style1.css的内容就包括了具体的样式设计：

h1{

color: red;

font-size: 48px;

background: #ccc;

}

在此正好说一下CSS的语法规则，一共由两部分构成：选择器和声明

selector{

declaration1(property: value);

declaration2(property: value);

}

(书写时代码尽量做到书写规范，之前一直用空格，nonono，用tab键，一次相当于4个空格)

但是三种都有的时候，依照就近原则，哪个离代码近，就执行哪个样式，而且当不同样式作用在同一元素身上时，不同的样式叠加在一起，冲突的后面覆盖前面，依照层叠覆盖的标准，要想打破这一规则，可以这样做来提高优先级
!important：

<style >
h1{
width: 200px;
background: #0f0 !important;
}
<link rel="stylesheet" href= "style1.css" >

</style>

尽量不要这样做！！！！！因为浏览器有着自己的优先级处理原则。

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航