HTML 引入 CSS 的几种方式
2017-08-12 17:14
507 查看
最近刚开始在学习前端的相关知识,学习新的一门语言确有一定的挑战。尤其学习前端,除了需要了解到一些基础的知识比如 html , css , js ,还要学会使用被广泛使用的一些架构,比如 AngularJS , jQuery , Bootstrap 等。万事开头难,其他废话就不说了,这里记录以下 html 引入 css 的几种方式吧。
1、直接为 html 自带的标签定义样式,比如 header , body , nav 等。这样,整个标签内的内容都会有这种样式。
2、自定义类,为该的类添加样式:
如果想让该类只用于某个单独的标签,比如 p 标签,那么只需要在 . 前面加上 p 就好了,如:
3、自定义属性,为该属性添加样式
上面就是在 video 标签里内联了 width、 height、style 等属性。
以上就是在学习过程中总结的到的HTML 引入CSS 的几种方式了。或许还有其他的方式,文中也或许有不足和错误,欢迎批评指正。
一、嵌入式
嵌入式需要在使用这些样式之前,定义你所需要使用的 CSS 样式。 嵌入式也有不同的方式:1、直接为 html 自带的标签定义样式,比如 header , body , nav 等。这样,整个标签内的内容都会有这种样式。
//定义: header { background-color: black; color: white; text-align: center; padding: 5px; } //使用:(由于是 html 自带的标签,所以可以直接使用) <header>我是HEADER</header>
2、自定义类,为该的类添加样式:
//定义:(自定义类名前面加个点) .mystyle { background-color: green; color: yellow; } //使用:(把定义的 class 用内联的方式 引入到标签中) <p class="myStyle"> 我的一个段落,样式是myStyle。 </p>
如果想让该类只用于某个单独的标签,比如 p 标签,那么只需要在 . 前面加上 p 就好了,如:
p.mystyle { background-color: green; color: yellow; } 这样,就只有 p 标签能通过 class=mystyle 引用了。
3、自定义属性,为该属性添加样式
//定义:(属性名前面加个#) #myAnotherStyle { background-color: red; color: gold; } //使用:(通过id,把定义的样式内联到标签 p ) <p id="myAnotherStyle"> 我的一个段落,样式是myAnotherStyle </p>
二、内联式
内联式引用就是在标签里直接定义并使用。每一个标签可以直接定义样式。但所定义的样式只能用于该标签里的内容,对外部的同名的标签是不起作用的。 如<video width="480" height="320" style="float: right;margin: 80px" controls="controls" > <source src="http://video.boohee.cn/fit/c20.mp4" type="video/mp4"> </video>
上面就是在 video 标签里内联了 width、 height、style 等属性。
三、外部引用
通过 link 标签从外部引入 css 样式。<link rel="stylesheet" type="text/css" href="该 css 的路径/url" >
以上就是在学习过程中总结的到的HTML 引入CSS 的几种方式了。或许还有其他的方式,文中也或许有不足和错误,欢迎批评指正。
相关文章推荐
- HTML页面引入CSS的几种方式及区别
- 浅谈html引入css的几种方式
- 浅谈html引入css的几种方式
- html页面中引入css的几种方式
- HTML基本结构、CSS引入方式以及选择器
- html引入css四种引入方式示例分享
- html文件引入其它html文件的几种方法:include方式
- html中引入js、css方式、写css方式
- HTML_04_css_的引入方式_基本选择器
- 在HTML中引入CSS的方法几种方法
- html中引入css方式
- CSS引入的几种方式
- HTML引入CSS的三种方式
- 【HTML打卡】0119css 文字、图片、控制器、引入方式、初始化
- 韩顺平_轻松搞定网页设计(html+css+javascript)_第30讲_类和对象细节_创建对象的几种方式_js对象内存分析_学习笔记_源代码图解_PPT文档整理
- css HTML里使用CSS 的几种方式
- HTML中引入CSS的方式
- HTML里使用CSS 的几种方式?
- HtmlWebpackPlugin以inine方式引入JS/CSS文件
- html引入css文件和js文件方式