【CSS基本用法】

最新推荐文章于 2024-08-19 17:35:32 发布

凌霄醉酒

最新推荐文章于 2024-08-19 17:35:32 发布

阅读量79

点赞数 1

文章标签： css 前端 web

本文链接：https://blog.csdn.net/weixin_62387515/article/details/130817142

版权

CSS基本用法

1.CSS基本语法
2.CSS的三种基本选择器
3. CSS样式表的4种引入方法

1.CSS基本语法

选择器{
 属性1:属性值1;
 属性2:属性值2;
 ……
}

选择器表示样式的名称；属性是设置元素的格式，如字体、颜色、字号等。

2.CSS的三种基本选择器

在CSS中，选择器分为基本选择器和复合选择器。基本选择器包括HTML标记选择器、class选择器和ID选择器。

2.1HTML标记选择器

语法：

HTML{
     属性1:属性值1;
     属性2:属性值2;
     ……
}

例如：设置div选择器大小为300px x 300px.

div{
     width:300px;
     height:300px;
}

2.2 class选择器

class选择器也称为类选择器

2.2.1 class选择器定义语法

类选择器定义语法：

.classname{
         属性1:属性值1;
         属性2:属性值2;
         ……
}

例如：设置类选择器first的样式为，边框为1px黑色的实线，文字颜色为红色。

.first{
       border:1px solid black;
       color:red;
}

2.2.2 class选择器应用语句

<html 标记 class = "classname"></html>

例如：在div标签和p标签中均应用first类选择器，此时div标签和p标签拥有frist中定义的属性，边框为1px黑色的实现，文字颜色为红色。

<div class="first"></div>
<p class="first"></div>

class选择器的特点： 当修改了类选择器之后，只有应用此类选择器的标记样式发生改变。

2.3 ID选择器

ID选择器名称是以英文#开始，选择器定义之后需要使用id属性应用样式。

2.3.1 选择器定义

语法：

#IDname{
         属性1:属性值1;
         属性2:属性值2;
         ……
}

例如：设置ID选择器title，文字大小是14px，粗体显示。

#title{
       font-size:14px;
       font-weight:bold;
}

2.2.2 定义ID选择器应用

选择器应用语法：

<html 标记 id = "IDname"></html>

例如：在div标签中均应用ID类选择器，此时div标签拥有frist中定义的属性，文字大小是14px，粗体显示。

<div id="title"></div>

ID选择器的特点： 在网页中定义了ID选择器式之中，只有应用这个ID选择器的标记样式发生改变。与class选择器不同的是，ID选择器在网页中只能应用一次。

*特殊用法

内嵌声明

p span{
       font-size:14px;
       font-weight:bold;
}

集体声明

h1,p{
       font-size:14px;
       font-weight:bold;
}

通用声明（全局声明）

*{
  font-size:14px;
  font-weight:bold;
}

3. CSS样式表的4种引入方法

使用CSS控制网页格式的方法有行内样式、内嵌式、链接式、导入式等方式。

3.1 行内样式

通过style属性定义在HTML标记内部的样式称为行内样式，行内样式只能影响该标签内的对象，无法影响另一个标签内对象样式。
语法：

<html 标签 style="属性1:属性值1;属性2:属性值2;……"

例如：

<p style=" borser:1px solid black;color:red">

注意： 行内样式可以应用< body >标记的所有子标记，包括< body >b标记在内，但不能用在< head >< title >< meta >等标记中。

3.2 内嵌式

用< style >标记设置样式的方法称为内嵌式样式。
语法：

<style type="text/css">
   选择器{
          属性1:属性值1;
          属性2:属性值2;
          ……
         }
</style>

说明：

< style >标记用来声明样式；
type属性表示CSS的MIME编码；
选择器可以是2节中介绍的三种选择器。
例如，定义一个内嵌式标记选择器：

<style type="text/css">
  div{
         width:300px;
         height:300px;
        }
</style>

3.3 链接式

链接式是指引用外部独立的CSS文件。定义了外部样式之后，网站中的所有网页都可以引用此样式。
语法：


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

说明：

href表示外部样式表文件的路径；
rel表示浏览器引用的是CSS文件；
type属性表示CSS的MIME编码。
一个外部的样式表文件可以应用于多个网页，当改变外部样式表文件时，所有的页面样式都将随之改变。

3.4 导入式

与< link >标记类似，使用@import可以导入外部的样式，但是@import只能在< style >标记中使用，而且必须放在其他CSS样式之前。
语法：

<style type = " text/css"
   @import url(外部样式url);
</style>

说明：使用导入式样式注意，引用外部样式语句结束一定要写分号。

凌霄醉酒

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
1
评论
【CSS基本用法】

属性 1 : 属性值 1;属性 2 : 属性值 2;…… }例如：设置类选择器first的样式为，边框为1px黑色的实线，文字颜色为红色。. first {#IDname {属性 1 : 属性值 1;属性 2 : 属性值 2;…… }例如：设置ID选择器title，文字大小是14px，粗体显示。#title {< html 标记 id = "IDname" > < / html >
复制链接

扫一扫