css样式

一眼一生
113 阅读3分钟

前端数据分为三个部分：框架（html）、表现（css样式）和行为（javascript）。css样式一共分为四种内联式、内部式、外部链接式和外部导入式。
1、内联式：直接写在html标签内部
写法：
<标签名 style="样式名1：样式值1；样式名2：样式值2；">  </标签名>
复制代码
2、内部式：使用选择器 样式块 比较方便
写法：
选择器{ 样式名1：样式值1； 样式名2：样式值2； }
复制代码
3、外部链接式：把css样式写在另外的文件里用 link 将其引用过来
写法：
<link rel="stylesheet" href="url地址">
复制代码
4、外部导入式：
写法：
@import url（"url地址"）；
复制代码
css样式优先级：行业样式（内联式）>内部样式（内部式）>外联样式（外部链接式和外部导入式）
选择器
css样式中内部式需要用到选择器。选择器就是在代码段中通过标记的办法快速选择一个地方然后给他加上css样式。
选择器分为：常用选择器、关系选择器、属性选择器、伪类选择器和伪元素选择器。
1、常用选择器
常用选择器有：
1、标签选择器     标签名{ }

2、id选择器      #id名字{ }

3、class类选择器 .类名{ }

4、并集选择器     选择器1，选择器2{ }

5、通用选择器     * { }

复制代码
写法：
   标签选择器 h2{ font-size: 30px; color: darkmagenta; } id选择器 #abc{ color: red; } 类选择器 .ab{ font-size: 20px; } .bc{ color: red; } 并集选择器 .ab,#abc{ background-color: darkcyan; } 通用选择器 { text-align: center; }     

标题二


<p class="ab">放假好无聊


<p class="bc">希望快点开学


<p id="abc">真想快点开学


div

复制代码
2、关系选择器
关系选择器分为：
1、相邻选择器   选择器1+选择器2{ }

2、后代选择器   选择器1 选择器2{ }

3、子选择器     选择器1>选择器2{ }


复制代码
   相邻选择器 li+li{ color:springgreen; } 后代选择器 div span{ font-size: 40px; } 子选择器 div>span{ background-color: yellowgreen; }

<div class="divcls">

  • 列表第一个

    • <li id="sec">列表第二个
  • 列表第三个


  • div的后代span

 
div的子代span

复制代码
选择器之间的关系：
父元素： 直接包含其他元素，这个元素就是包含元素的父元素
祖先元素：包含其他元素，这个元素就是包含元素的祖先元素
子元素： 直接被包含的元素，这个被包含的元素就是包含元素的子元素
后代元素： 被包含的元素，这个被包含的元素就是包含元素的后代元
复制代码
3、属性选择器
属性选择器：
选择器 [属性名 = 属性值]  分为以下四种情况：
1、选择器[ 属性名  =  属性值 ]   完全匹配：当属性值和下方完全匹配时才被选择
2、选择器[ 属性名  ^=  属性值]   开头匹配：当属性值和下方开头匹配时才被选择
3、选择器[ 属性名  =  属性值]   结尾匹配：当属性值和下方结尾匹配时才被选择        4、选择器[ 属性名 ∗ = 属性值 ]   包含匹配：只要下方属性值包含所选属性值就会被选择         复制代码   <style>         li[abc=ab]             font−size: 20px;                  li[abc=ab]             background−color: rgb(175, 20, 207);                  li[abc=  属性值]   结尾匹配：当属性值和下方结尾匹配时才被选择\        4、选择器[ 属性名 * = 属性值 ]   包含匹配：只要下方属性值包含所选属性值就会被选择\        \ 复制代码\   <style>\         li[abc=ab]{\             font-size: 20px;\         }\         li[abc^=ab]{\             background-color: rgb(175, 20, 207);\         }\         li[abc=cd]{
color: red;
}
li[abc=b]{
text-align: center;
}




    <li abc="abcd"  title="这是第一个标签">第一个li标签
    <li abc="aber">第二个li标签
    <li abc="erab">第三个li标签
    <li abc="ercd">第四个li标签


复制代码
4、伪类选择器
伪类选择器：
1、已经访问过的页面   :visited
2、未访问过的页面     :link 
3、鼠标悬浮样式       :hover
复制代码
已经访问过的页面   a:visited{ color: red;    } 未访问过的页面   a:link{ color: rosybrown; } 鼠标悬浮样式（变大）   a:hover{ font-size: 30px; }

<a href="www.baidu.com">百度
<a href="www.bilibili.com">bilibili
<a href="www.7k7k.com">7k7k

复制代码
5、伪元素选择器
伪元素选择器
::first-line 向元素的第一行内容添加样式
::first-letter 向元素首字母添加样式
::before 向元素之前添加内容 与content结合使用
::after 向元素之后添加内容 与content结合使用


复制代码
向元素的第一行内容添加样式    p::first-line{ color:blue; } 向元素首字母添加样式    p::first-letter{ font-size: 40px; } 向元素之前添加内容    p::before{ content:"【"; } 向元素之后添加内容    p::after{ content:"】"; }


9月14日0—24时，31个省（自治区、直辖市）和新疆生产建设兵团报告新增确诊病例73例。
其中境外输入病例23例（云南13例，广东4例，上海2例，天津1例，浙江1例，福建1例，河南1
例），含4例由无症状感染者转为确诊病例（天津1例，浙江1例，福建1例，广东1例）；本土病
例50例（均在福建，其中莆田市33例、厦门市12例、泉州市5例），含9例由无症状感染者转为
确诊病例（均在福建）。无新增死亡病例。新增疑似病例1例，为境外输入病例（在上海）。


复制代码
选择器优先级：ID 选择器 >类选择器 =属性选择器 =伪类选择器 >标签选择器 =伪元素选择器

avatar
文章
阅读
粉丝