CSS样式嵌入html中的三种方式 |
您所在的位置:网站首页 › javascript可以直接嵌入html › CSS样式嵌入html中的三种方式 |
当我们写一个html静态页面的时候,发现所生成的排版或者效果非常的不好时,我们就可以使用CSS样式来美化所生成的html的控件,css样式的生效完全依赖于html文件,下面介绍如何将css样式嵌入到html中。 下面写一个输入框的html文件。 test在网页中运行就只有一个在最左上角的输入框。
目录 1.在标签中写入style属性 2. 将样式放置为style标签中 3.将style标签放置 .css文件内 下面我们通过不同形式的CSS样式将其简单的变样。 1.在标签中写入style属性在每一个标签里可以写入类似于 style = " "的形式在该标签里写入CSS样式,该样式只作用于该标签。 就像上述例子,我们发现输入框输入的字体颜色是黑色,我们将其修改为红色,将输入框适当的居中显示。 test 就会呈现出这样的效果。 2. 将样式放置为style标签中通过在每一个标签写入style = " "可以将样式写入到该标签中,当html文件有多个重复的标签都需要该样式的时候,我们就会发现在每一个标签中写入该样式太麻烦。这个时候我们就可以在html文件中写入style标签,在style标签写CSS样式。 另外在style标签中写入css样式有三种模式。我们需要指定该样式是写在哪里的。其写在哪里的就可以包含标签,id 属性, class属性。
标签选择器 通过写入某标签样式的格式: 某标签名{ 样式 } 通过在css样式中写入标签选择器可以统一改变指定标签的样式。 id选择器 通过写入id属性样式的格式: #id名{ 样式 } class选择器 通过写入class属性样式的格式: .class名{ 样式 } 在html中,标签中id属性是唯一,也就是说但某一个标签用了id = "1" 时,那么后续的标签则不可以使用id= "1"来表示。class属性则不唯一,可以多个标签使用同一个class值。这一性质也说明了id选择器和class选择器的区别。id选择器差不多只能表示一个具体的标签样式,class选择器则可以表示多个相同class属性值的标签。两个选择器对于标签选择器来说的话就显得更加灵活。 举个例子,我们在网页中输入4个字母A。 test1 div { color: red; } #ida { color: blue; } .classa1 { color: green; } A A A A得出的效果图为:
另外其中的 *{ } 可以表示全部标签的样式
在 内的注释是由/*注释内容*/ 来注释的。 3.将style标签放置 .css文件内我们发现通过style标签 来写入css样式已经相当不错了。但是,假如我们在过一段时间后,需要对其style标签中的样式进行修改,就需要修改html文档,并且假如html文档足够的多,或许这是一件麻烦事。我们又发现一些样式在n多个html文件中都通用,假如每一个html文件中都写入了style标签css样式的话,显然很麻烦。对此我们就可以采用将style标签封装到另一个后缀为.css文件中。 我们在上述html文件的同路径下,创建一个名为css文件夹,在css文件夹中创建一个test.css文件,text.css就是写入css样式的,对此我们可以将上述的style标签中的css样式原封不动的放到text.css中。 当发现css样式text.css和html文件test.html相互分离开来了,想要在html文件中能够使用到text.css样式则需要让其两个又联系。我们可以在html文件的head标签内写入link标签,让.css文件连接到html文件中。
只需要修改href属性里面的值就可以来将.css文件连接到html文件中,其href属性的值就就是.css的路径。 我们对上述输入4个字母A的html进行修改。 test A A A A 在test.css中添加: div { color: red; } #ida { color: blue; } .classa1 { color: green; } 运行html文件就可以得出一模一样的样式来。
此外,CSS样式非常之多,这里不一一例举。 |
今日新闻 |
推荐新闻 |
CopyRight 2018-2019 办公设备维修网 版权所有 豫ICP备15022753号-3 |