CSS的基本概念，CSS的优势，基本语法，选择器

最新推荐文章于 2022-07-17 13:41:40 发布

你的笑容灿烂了这个夏天

最新推荐文章于 2022-07-17 13:41:40 发布

阅读量336

点赞数

分类专栏：前端

本文链接：https://blog.csdn.net/weixin_44823472/article/details/92801279

版权

前端专栏收录该内容

2 篇文章 0 订阅

订阅专栏

CSS的基本概念

Cascading Style Sheet层叠样式表
表现HTML文件样式的语言
包括对字体，颜色，边距，高度，宽度，背景图片，网页定位的设定
网页中的css

1、直接在div中使用css样式制作div+css网页
2、html中使用style自带式
3、使用@import引用外部CSS文件
4、使用link引用外部CSS文件推荐此方法
<styletype=“text/css”>
style>

CSS的发展史

1996年css1.0
1998年css2.0

融入了DIV+CSS的概念，提出了HTML结构与CSS样式表的分离
2004年css2.1

融入了更多高级的用法，如浮动，定位等
2010年css3.0

它包括了css2.1的下的所有功能，是目前最新的版本，它向着模块化的趋势发展，又加了很多使用的新技术，如字体，多背景，图角，阴影，动画等高级属性，但是它最需要高级浏览器的支持。由于现在IE6，IE7使用比例已经很少，对市场企业进行调研发现使用CSS3的频率大幅度增加，学习CSS3已经成为了一种趋势。

CSS的优势

内容与表现分离
网页的表现统一，容易修改
丰富的样式，使得页面布局更加灵活
减少网页的代码量，增加网页的浏览速度，节省网络宽带
运用独立于网页的css，有利于网页被搜索引擎收录

CSS的基本语法

CSS的定义是由三部分组成的，包括选择符（selector）、属性（properties）、属性的取值（value）。其语法如下：

serlector{

　　  　　property1:value;

　　　　  property2:value;

　　　　  ……

　　　　  propertyN:value;

　　　}

其中，selector是选择符，最常见的选择符是html标签；property是选择符的属性，value为选择符的属性值。多个选择符用分号隔开。

例子：

body{
　　backgroung-color:yellow

}
h1,h2,p{
　　background-color:#00FF00;

　　color:red
}

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="My.css" rel="stylesheet" type="text/css">
</head>

样式应用顺序

行内样式优先级最高
针对相同的样式属性，不同的样式属性将以合并的方式呈现
相同样式并且相同属性，呈现方式在中的顺序决定，后面会覆盖前面属性
!important 指定样式规则应用最优先

基本选择器

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.后代元素选择器

匹配所有div标签里嵌套的P标签，之间用空格分隔。

   div p {color: yellow;}
<div>
    <p>Nick</p>
    <div>
        <p>Nick</p>
    </div>
</div>

2.子元素选择器

匹配所有div标签里嵌套的子P标签，之间用>分隔。

div > p {color: yellow;}
 
<div>
    <p>Nick</p>
    <p>Nick</p>
</div>

3. 相邻元素选择器

匹配所有紧随div标签之后的同级标签P，之间用+分隔（只能匹配一个）。

 div + p {color: yellow;}
<div>Nick</div>
<p>Nick</p>

4.伪类选择器

4.1. link、hover、active、visited

a:link（未访问的链接状态）,用于定义了常规的链接状态。
a:hover（鼠标放在链接上的状态）,用于产生视觉效果。
a:active（在链接上按下鼠标时的状态）。
a:visited（已访问过的链接状态）,可以看出已经访问过的链接。

  a:link{color: black}
    a:hover{color: yellow}
    a:active{color: blue}
    a:visited{color: red}
 
<a href="#">Nick</a>

4.2.before、after

P:before 在每个< p>元素的内容之前插入内容;
P:after 在每个< p>元素的内容之后插入内容。

  p {
        color: yellow;
    }
    p:before{
        content: "before...";
    }
    p:after{
        content: "after...";
    }
 
<p> Nick </p>

5属性选择器

[title] & P[title]

设置所有具有title属性的标签元素；

设置所有具有title属性的P标签元素。

  [title]
    {
        color: yellow;
    }
    p[title]
    {
        color: yellow;
    }
 
<div title>Nick</div>
<p title>Nick</p>

你的笑容灿烂了这个夏天

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
CSS的基本概念，CSS的优势，基本语法，选择器

CSS的基本概念Cascading Style Sheet层叠样式表表现HTML文件样式的语言包括对字体，颜色，边距，高度，宽度，背景图片，网页定位的设定网页中的css1、直接在div中使用css样式制作div+css网页2、html中使用style自带式3、使用@import引用外部CSS文件4、使用link引用外部CSS文件推荐此方法<stylety...
复制链接

扫一扫