0222CSS学习_样式

最新推荐文章于 2024-05-01 12:00:14 发布

shuren1991

最新推荐文章于 2024-05-01 12:00:14 发布

阅读量211

点赞数 1

分类专栏：学习文章标签： css HTML

本文链接：https://blog.csdn.net/shuren1991/article/details/56489515

版权

学习专栏收录该内容

28 篇文章 0 订阅

订阅专栏

CSS的样式

邹顺强发表于 2017-02-22 14:55

1.CSS样式的种类

缺省
內联样式
内部样式
外部样式

缺省：

浏览器默认设置的样式，例如Chrome浏览器默认最小字体为12px

內联样式：

在HMTL元素內，代码如下：
<p style="color:blue">显示为蓝色</p>

显示为：
显示为蓝色

内部样式：

在HMTL<head>內，需要嵌入<style>内部，代码如下：
<head><style>p{color:blue}</style></head>
<body><p>显示为蓝色</p></body>

显示为：
显示为蓝色

上述示例为内部样式中的“标记选择器”，之外还有“类选择器”“ID选择器”：
标记选择器：<head><style>p{color:blue}</style></head>
<body><p>显示为蓝色</p></body>

类选择器：<head><style>.class1{color:blue}</style></head>
<body><p class="class1">显示为蓝色</p></body>

ID选择器：<head><style>#ID{color:blue}</style></head>
<body><p id="ID">显示为蓝色</p></body>

3类选择器的优先级为：ID选择器>类选择器>标记选择器；若在一个元素中使用多个ID选择器，则优先体现第一个ID；若在一个元素中同时使用多个类选择器，则按类名在style中的顺序，在下面的优先体现，如下：
定义内部样式.inside{}为红色;.inside2{}为蓝色;.inside3{}为黄色;:<head><style>.inside{color:red} .inside2{color:red} .inside3{color:red}</style></head>
代码1：<p class="inside inside2" >显示为蓝色</p>
代码2：<p class="inside2 inside">显示为蓝色</p>
代码2：<p class="inside3 inside2">显示为黄色</p>

显示为：
代码1：显示为红色
代码2：显示为蓝色
代码3：显示为黄色

注意不能写成：<p class="inside" class="inside2" >显示为蓝色</p>

外部样式：

在HMTL外新建.css格式文件，并在Html內引入.css格式：
在.css文件中直接设定样式：p{color:blue}
引入.css文件:<style>link rel="stylesheet" type="text/css" href="css.css>
<p>显示为蓝色</p>

显示为：
显示为蓝色

2.CSS样式的优先级

內联样式与内部样式

最终体现內联样式，例如：
定义内部样式.inside{}为红色:<head><style>.inside{color:red}</style></head>
代码：<p style="color:blue" class="inside">显示为蓝色</p>

显示为：
显示为蓝色

同理，內联样式与外部样式同时使用，最终体现內联样式

外部样式与内部样式

按引入代码的位置体现，若引入代码在style列表后，则体现外部样式，若style在后，则体现内部样式，例如：
引入.css文件,定义.outdide1{}为蓝色（放在<style>前面）:<style>link rel="stylesheet" type="text/css" href="css.css>
定义内部样式.inside{}为红色:<head><style>.inside{color:red}</style></head>
代码1：<p class="outside1" class="inside">显示为红色</p>
代码2：<p class="inside" class="outside1">显示为红色</p>

显示为：
代码1：显示为红色
代码2：显示为红色

定义内部样式.inside{}为红色:<head><style>.inside{color:red}</style></head>
引入.css文件,定义.outside2{}为绿色（放在<style>后面）:<style>link rel="stylesheet" type="text/css" href="css2.css>
代码1：<p class="outside2 inside">显示为绿色</p>
代码2：<p class="inside outside2">显示为绿色</p>

显示为：
代码1：显示为绿色
代码2：显示为绿色

shuren1991

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
0222CSS学习_样式

CSS的样式邹顺强发表于 2017-02-22 14:551.CSS样式的种类缺省內联样式内部样式外部样式缺省：浏览器默认设置的样式，例如Chrome浏览器默认最小字体为12px內联样式：在HMTL元素內，代码如下：显示为蓝色显示为：显示为蓝色内部样
复制链接

扫一扫