江苏龙网

  1. 主页 > 生活百科 > >

CSS是什么？这一篇全解，绝对有你想要的

css

简介css 是什么？

CSS是什么？这一篇全解，绝对有你想要的

文章插图
 
CSS是Cascading Style Sheets的简称，中文称为层叠样式表 。
属性和属性值用冒号隔开，以分号结尾 。
CSS 四种引入方式：
1.行内式
行内式是在标签的style属性中设定CSS样式 。
<div style="..."></div>2.嵌入式
嵌入式是将CSS样式集中写在网页的<head>标签的<style></style>标签对中 。
<head>    ...    <style type="text/css">        ...此处写CSS样式    </style></head>3.导入式
将一个独立的.css文件引入html文件中，导入式使用@import 引入外部CSS文件，<style>标记也是写在<head>标记中 。
导入式会在整个网页装载完后再装载CSS文件 。
<head>    ...    <style type="text/css">        @import "My.css"; 此处注意.css文件的路径    </style></head>4.链接式
将一个独立的.css文件引入到HTML文件中，使用<link>标记写在<head>标记中 。
链接式会以网页文件主体装载前装载CSS文件 。
<head>    ...    <link href=https://www.isolves.com/it/cxkf/yy/CSS2/2021-03-18/"My.css" rel="stylesheet" type="text/css">样式应用顺序：
  • 行内样式优先级最高
  • 针对相同的样式属性，不同的样式属性将以合并的方式呈现
  • 相同样式并且相同属性，呈现方式在<head>中的顺序决定，后面会覆盖前面属性
  • !important 指定样式规则应用最优先
.nick {    color: yellow !important;}
CSS是什么？这一篇全解，绝对有你想要的

文章插图
 
选择器（Selector）基本选择器：
1.通用元素选择器
* 表示应用到所有的标签 。
* {color: yellow}2.标签选择器
匹配所有使用 div 标签的元素（可以匹配所有标签）
div {color: yellow}3.类选择器
匹配所有class属性中包含info的元素 。
语法：.类名{样式}（类名不能以数字开头，类名要区分大小写 。）
.Mycolor {color: yellow}<h3 class="Mycolor">nick</h3>4.ID选择器
使用id属性来调用样式，在一个网页中id的值都是唯一的（是W3C规范而不是规则，所以不会报错） 。
语法：#ID名{样式}（ID名不能以数字开头）
#Mycolor {color: yellow}<h3 id="Mycolor">Nick.</h3>组合选择器：
1.多元素选择器
同时匹配h3,h4标签，之间用逗号分隔 。
h3,h4 {color: yellow;}<h3>Nick</h3><h4>Jenny</h4>2.后代元素选择器
匹配所有div标签里嵌套的P标签，之间用空格分隔 。
    div p {color: yellow;}<div>    <p>Nick</p>    <div>        <p>Nick</p>    </div></div>3.子元素选择器
匹配所有div标签里嵌套的子P标签，之间用>分隔 。
    div > p {color: yellow;}<div>    <p>Nick</p>    <p>Nick</p></div>4.毗邻元素选择器
匹配所有紧随div标签之后的同级标签P，之间用+分隔（只能匹配一个） 。
    div + p {color: yellow;}<div>Nick</div><p>Nick</p>属性选择器：
1.[title] & P[title]
设置所有具有title属性的标签元素；
设置所有具有title属性的P标签元素 。
    [title]    {        color: yellow;    }    p[title]    {        color: yellow;    } <div title>Nick</div><p title>Nick</p>2.[title=Nick]
设置所有title属性等于“Nick”的标签元素 。
    [title="Nick"]    {        color: yellow;    }<p title="Nick">Nick</p>


推荐阅读


上一篇：尼斯湖水尼斯湖水怪 英国尼斯湖水怪传说

下一篇：发小和闺蜜哪个更重要 发小和闺蜜的意思一样吗