css选择器样式引用

最新推荐文章于 2024-09-28 15:35:33 发布

鱼味Roly

最新推荐文章于 2024-09-28 15:35:33 发布

阅读量116

点赞数

文章标签： css

本文链接：https://blog.csdn.net/xiaochuang6/article/details/120052055

版权

css基础

css用于修饰前台页面。

语法：

<style>
    h1{
        color:red;
    }
</style>
<lable style="color:red;">yyds</lable>

css引入方式

内部在<head>中定义style
外部1 在外部定义css文件用<link rel=" " href="">

外部2

<style> 
      @import url("../CSS/CssDemo01.css");--> <!--导入式-->
</style>

tips：优先级

就近原则。这也是css可实现高复用的原因。

css选择器

基本选择器

<!--标签选择器选择所有标签-->
<!--类选择器-->  .class
<!--id选择器-->   #id

tips:优先级：id>class>标签

层次选择器

1. 后代选择器 
body p{  选择body下所有的p标签
}
2.子选择器
body>p{   选择body下一级的所有p标签
}
3. 相邻兄弟选择器
.id+p{     id为id的标签下的同级的第一个p标签    
}
4.通用选择器 
.id~p{      向下所有
}

属性选择器

a[id] => a[id!=null]  所有  有id属性字段的a标签
a[id = '2']   id =2 的所有a标签
[href^=https] 以。。。开头
[href$=.com]   以。。。结尾

结构伪类选择器

点击伪类选择器阅读

css的一些样式

<!--字体样式
    font-family
    font-size
    color
    font-weight
    font:
-->
<!--文本样式  rgba  红绿蓝透明
    color
    text-align
    text-indent  em
    height(块高度)
    line-height 行高
-->

引用：https://blog.csdn.net/u010297791/article/details/53968089