认识Style标签

最新推荐文章于 2021-05-31 10:59:10 发布

师兄白泽

最新推荐文章于 2021-05-31 10:59:10 发布

阅读量603

点赞数 1

分类专栏：前端文章标签： html5 css3 stylesheet

本文链接：https://blog.csdn.net/weixin_45297286/article/details/103676582

版权

前端专栏收录该内容

10 篇文章 0 订阅

订阅专栏

认识<style>标签:
在html中通过使用style标签引入CSS样式,

<head lang="en">
    <meta cahrset="UTF-8">
    <title>style标签</style>
    <style>
        h1{
            font-size:12px;
            color:#F00;
        }
    </style>
</head>

行内样式:

<h1 style="color:red;">style属性的应用</h1>

链接外部样式表:

<head>
<link href="style.css" rel="stylesheet" type="text/css"/>
</head>

导入外部样式表:

<style>
@import url("css/common.css");
</style>

注:大多数网站习惯用链接外部样式
样式优先级:
采取就近一致原则;

选择器
1.标签选择器:

<h1>~<h6>,<p>,<img/>等

语法:

p{font-size:16px;}

2.类选择器

<p class="green"></p>
.green{font-size:23px;}

3.ID选择器:

<p id="green"></p>
#green{font-size:23px;}

三种选择器的优先级:
id选择器>类选择器>标签选择器
高级选择器:
E F 后代选择器
E>F 子选择器
E+F 相邻兄弟选择器
E-F 通用兄弟选择器

结构伪类选择器:
E:first-child 父元素的第一个子元素E
E:last-child父元素的最后一个子元素E
E F:nth-child(n)选择父集元素E的第n个子元素
E:first-of-type 父元素内具有指定元素的第一个子元素E
E:last-of-type 父元素内具有指定元素的最后一个子元素E
E F:nth-of-type(n)选择父集元素内具有指定类型的第n个元素

属性选择器:
E[attr] 选择具有属性attr的E元素
E[sttr=val] 选择具有属性attr并且属性值为val
E[attr^=val]选择匹配具有属性attr的E元素且属性值是以val开头的任意字符串
E[attr$=val]选择匹配具有属性attr的E元素且属性值是以val结尾的任意字符串
E[attr*=val]选择匹配具有属性attr的E元素且任意属性值是以val的任意字符串

师兄白泽

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
打赏
0
评论
认识Style标签

认识<style>标签:在html中通过使用style标签引入CSS样式,<head lang="en"> <meta cahrset="UTF-8"> <title>style标签</style> <style> h1{ font-size:12px; ...
复制链接

扫一扫