HTML 引入 CSS 的几种方式
来源:互联网 发布:上海联通网络测速 编辑:程序博客网 时间:2024/05/21 11:24
最近刚开始在学习前端的相关知识,学习新的一门语言确有一定的挑战。尤其学习前端,除了需要了解到一些基础的知识比如 html , css , js ,还要学会使用被广泛使用的一些架构,比如 AngularJS , jQuery , Bootstrap 等。万事开头难,其他废话就不说了,这里记录以下 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 的几种方式了。或许还有其他的方式,文中也或许有不足和错误,欢迎批评指正。
阅读全文
0 0
- HTML 引入 CSS 的几种方式
- html页面中引入css的几种方式
- 浅谈html引入css的几种方式
- 浅谈html引入css的几种方式
- 引入CSS样式的几种方式
- 引入CSS样式的几种方式
- css的几种引入方式!
- HTML引入CSS的三种方式
- Html引入css的三种方式
- HTML引入CSS的三种方式
- 在HTML中引入CSS的方法几种方法
- 在html中引入css的几种方法
- HTML中引入CSS文件的几种方法
- HTML中引入CSS的四种方式
- html中引入css的四种方式
- html网页css的三种引入方式
- html页面中引入css样式的3种方式
- HTML 引入CSS 三种方式
- Windows VS2015配置OpenCV2.4.13 新手指南(C/C++)
- 【HDU 6112 今夕何夕】
- ASCII & Binary
- 学ue4感受
- 并查集
- HTML 引入 CSS 的几种方式
- 递归入门:判断回文字符串
- 当 Thrift 遇到 JDK Epoll Bug
- MySQL
- 111
- C语言入门:输出学生成绩(要求动态分配)
- 前后端分离,动态添加文本框以及回填数据
- KMP算法next数组的计算
- Spring4.X + Spring MVC + Mybatis3 零配置应用开发框架搭建详解 (2)