如何在 HTML 中应用 CSS基础详解
2016-03-20 01:24
453 查看
接下来用这个 index
我们可以通过三种方式对 HTML 的内容作修饰。
第一种是直接引用外部文件 (比如:
第二种是在 HTML 文件头中嵌入 CSS 样式。
第三种是直接写入标签中。
综合起来,HTML 可以是这样的 (选择一种方法即可)。鉴于方便修改的缘故,通常选择第一种方法。
修饰某一个或多个标签、标签内容有三种方式:直接通过标签名修饰、通过唯一的 ID 修饰、通过 class 修饰。首先,考虑修饰单一的标签、ID 和 class。
/* 内部元素以;分开,结尾可以不用; */
并列修饰(修饰多个)。
嵌套修饰(修饰子标签),下面两者对于给出的
对于嵌套的情况,可以是嵌套多层的、隔层的,并且可以标签名、ID、class 并用。
对要实现的效果都胸有成竹之后,更多的考虑在于如何组织CSS。这里的组织指的是CSS的嵌套和分解,通过良好的组织达到较好的可读性和可维护性。这可以通过学习其他框架来提高这种组织的能力,比如 Bootstrap。通过学习Bootstrap至少可以让人发现两个值得关注的地方:元素的共性和特性的分解;元素嵌套关系的组织。
另外,为了保持与HTML尽量分离,通常是用元素的
CSS 中用
修饰语句通过分号隔开
查看 HTML 内容的 CSS 修饰:在浏览器中右键选择检查元素,可以实现查看、修改、添加
Firefox 提供了 3D 查看效果来查看 HTML 的层结构
由于浏览器解析不同,需要考虑 CSS 样式的兼容性,为多个浏览器适配
考虑 CSS 之间是否会存在冲突。比如,通过标签设置为一种颜色,但是在另外的地方又通过 ID 设置为另外一种颜色。这可能使得修饰达不到预期的效果。
CSS 样式的精简。通过适当的分解 CSS,通过并列嵌套等修饰内容,减少冗余的 CSS。
CSS 一方面可以实现基本的对内容的修饰,也可以实现与用户的交互响应。
一个标签中的多个 class 通过空格来分开,比如
子选择器
兄弟选择器
属性选择器
伪元素
…。
.html将在下文讲解中用到。
<html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> </head> <body> <h2>h2 tag</h2> <div class="class1">class1</div> <div class="class2">class2</div> <div id="main"> <h2>h2 in main</h2> </div> </body> </html>
如何在 HTML 中应用 CSS
我们可以通过三种方式对 HTML 的内容作修饰。第一种是直接引用外部文件 (比如:
index.css)。
<link rel="stylesheet" type="text/css" href="index.css">
第二种是在 HTML 文件头中嵌入 CSS 样式。
<style type="text/css"> h2{font-size: 100px;} </style>
第三种是直接写入标签中。
<div style="font-size:20px">Font-Size</div>
综合起来,HTML 可以是这样的 (选择一种方法即可)。鉴于方便修改的缘故,通常选择第一种方法。
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<link rel="stylesheet" type="text/css" href="index.css"><style type="text/css"> h2{font-size: 100px;} </style></head>
<body>
<h2>h2 tag</h2>
<div style="font-size:20px">Font-Size</div></body>
</html>
如何选择要修饰的内容
修饰某一个或多个标签、标签内容有三种方式:直接通过标签名修饰、通过唯一的 ID 修饰、通过 class 修饰。首先,考虑修饰单一的标签、ID 和 class。h2{font-size:100px;} /* 通过标签 */ .class1{font-size:50px;} /* 通过 class */ #main{background:gray;} /* 通过 ID */
/* 内部元素以;分开,结尾可以不用; */
并列修饰(修饰多个)。
.class1,.class2,h2,div{font-size:100px;}
嵌套修饰(修饰子标签),下面两者对于给出的
demo.html具有相同效果。
#main h2{color: #980000;} /* main id 下的 h2 标签 */ div h2{color: #980000;} / * div 下的 h2 标签 */
对于嵌套的情况,可以是嵌套多层的、隔层的,并且可以标签名、ID、class 并用。
进阶:CSS样式的组织
对要实现的效果都胸有成竹之后,更多的考虑在于如何组织CSS。这里的组织指的是CSS的嵌套和分解,通过良好的组织达到较好的可读性和可维护性。这可以通过学习其他框架来提高这种组织的能力,比如 Bootstrap。通过学习Bootstrap至少可以让人发现两个值得关注的地方:元素的共性和特性的分解;元素嵌套关系的组织。另外,为了保持与HTML尽量分离,通常是用元素的
class来修饰元素,其次是标签名。
class里面样式的并列体现了样式的“分解”。
其他
CSS 中用 /* */作为注释标记
修饰语句通过分号隔开
h2{font-size:100px;color:red;}
查看 HTML 内容的 CSS 修饰:在浏览器中右键选择检查元素,可以实现查看、修改、添加
Firefox 提供了 3D 查看效果来查看 HTML 的层结构
由于浏览器解析不同,需要考虑 CSS 样式的兼容性,为多个浏览器适配
考虑 CSS 之间是否会存在冲突。比如,通过标签设置为一种颜色,但是在另外的地方又通过 ID 设置为另外一种颜色。这可能使得修饰达不到预期的效果。
CSS 样式的精简。通过适当的分解 CSS,通过并列嵌套等修饰内容,减少冗余的 CSS。
CSS 一方面可以实现基本的对内容的修饰,也可以实现与用户的交互响应。
一个标签中的多个 class 通过空格来分开,比如
<div class="class1 class2></div>"。
子选择器
body > div > div > blockquote{ margin-left: 30px; }。
兄弟选择器
.post h1 + p:first-line{ font-variant: small-caps; },
.post h1 ~ p{...}。
属性选择器
div[class*="post"]{color: #EEE;},
input[type="text"]{width=200px;}。
伪元素
ul li:first-child{...},
ul li:nth-child(2n+1){...},
.clearfix:after{clear:both;},
a:active{...},
p:first-letter{...},
.post > p:first-of-type:first-line{...},
input:not([type="submit"]){...},
…。
相关文章推荐
- CSS margin 属性
- 不可不知的CSS小技巧
- CSS3 Transition
- DOM操纵样式表
- No.3小白的HTML+CSS心得篇
- 欢迎使用CSDN-markdown编辑器
- CSS实现垂直居中的常用方法
- cssReset
- [置顶] CSS3 动画实现方法大全(*****************************星级文章*************************)
- CSS 「Sprite」雪碧图应用
- CSS常用十大技巧
- myslide 插件开发知识点总结和 css3 动画性能问题的研究
- myslide 插件开发知识点总结和 css3 动画性能问题的研究
- myslide 插件开发知识点总结和 css3 动画性能问题的研究
- DOM之样式相关
- 重新想,重新看——CSS3变形,过渡与动画③
- CSS魔法堂:不得不说的Containing Block
- 点击显示一个样式自定义的Popupwindow
- IE8兼容background-size属性
- discuz二级导航选择横排样式不显示的解决方法