CSS(层叠样式表cascading style sheet)——CSS样式、基础选择器

最新推荐文章于 2024-07-17 18:42:40 发布

hi Chelsea

最新推荐文章于 2024-07-17 18:42:40 发布

阅读量163

点赞数 1

文章标签： css html html5

本文链接：https://blog.csdn.net/hi_Celia/article/details/120785482

版权

一、CSS作用

对页面的外观进行美化
统一网站页面的风格
实现内容和样式的分离,适合团队开发

二、CSS语法规范

三、CSS引入方式

CSS的3种样式表

书写位置的不同分为：行内样式表（行内式）

内部样式表（嵌入式）

外部样式表（连接时）

1、行内样式表（行内式）——适用于修改简单样式

元素标签内部的style属性中设定CSS样式

 <p style="color: cyan; font-size: 45px;">西安邮电大学</p>

style其实就是标签的属性

2、内部样式表（嵌入式） ——练习时常用

写在html页面内部，写在<style></style>标签中

 <style>
    body {  
            text-align: center; /* 表示body中的所有内容都居中 */ 
        }
				
      p {
		    color: red; /*color表示文字的颜色*/
		    font-size: 45px; /*font-size表示字号*/
		}

   </style>
   <body>
		<p>湖南湘潭大学</p>
   </body>

<style> 标签可放HTML任何地方，一般放<head>中

3、外部样式表——开发中常用

单独写在CSS文件中，之后将其引入到HTML页面中

第一步：创建扩展名为.css的样式文件（不用<style>标签）
第二步：在页面中通过<link>标签将外部的css文件链接起来

<link rel="stylesheet" href="css文件路径">

rel 定义当前文档与被链接文档间的关系，常指定为 "stylesheet" （样式表文件）
hrel 定义所链接外部样式表文件的URL(相对路径，绝对路径)

四、CSS的基础选择器：在CSS中定位页面中的标签(控件)

  h1 {
		color: red; 
		font-size: 45px; 
	 }

以上CSS做了两件事：

（1）找到所有的h1标签。选择器（选对人）

（2）设置这些标签的样式，例：颜色为红（做对事）

1、标签名选择器：

用HTML标签名作选择器

语法：

标签名{
属性: 值;
}

作用：把某一类标签全部选择出来

优：能快速为页面中同类型的标签统一设置样式

却：不能设置差异化样式

2、类选择器：

在页面中给标签添加class属性,标签的class属性值可以重复

可单独选择一个或某几个标签

语法：

.类名(标签的class属性值){
属性: 值;
}

类选择器口诀：

标签点定义——>结构类(class)调用——>一个或多个——>开发最常用

例：将所有拥有red类的HTML元素设置均为红色

.red{

        color:red;

        }

结构需用class属性来调用class类的意思

<div class='red'> 变红色<div>

注意：

类选择器使用“.” (英)进行标识，后紧跟类名（自定义）
可理解为给这个标签起了个名字 .自定义名
不使用纯数字，中文命名，尽量使用英文，规范命名

多类名：（节省了CSS代码，统一修改方便）

使用方式：

<div class='red font35'>有点意思</div>

在class 属性中写多个类名，中间用空格隔开

3、id选择器

在页面中给标签添加id属性,用“#”定义。

标签的id属性值不能重复，只能在每个HTML文档中出现一次

语法：

#id {
属性: 值;
}

例：将id为nav元素的内容设置为粉色

#nav {
       color: pink;
      }

id选择器口诀：

样式#定义——>结构类(id)调用——>只能调用一次，别人切勿使用

id选择器和类选择器的区别

类选择器(class) 好比人名，一人可有多个名字，一个名字可被多人使用
id选择器好比身份证号码，全中国唯一，不得重复
开发类选择器使最多
id选择器一般用于页面唯一性元素上，常用JS使用

4、通配符选择器

用“*” 定义，代表选择页面中所有元素

语法：

* {
属性: 值;
}

通配符选择器
可设置 margin 、padding、border属性值为0，将html css body div span等标签都定义

强调：颜色的表示方式

           A、颜色名：red、blue、green

           B、十六进制表示：#rgb或#rrggbb,r、g、b表示三原色的值(取值范围在0~f之间)

                   #fff

           C、rgb(r,g,b)函数：r,g,b三个参数表示三原色的值(取值范围在0~255之间)

               rgba(r,g,b,a)函数：r,g,b三个参数表示三原色的值(取值范围在0~255之间),参数a表示透明度(取值0.0~1.0之间)

hi Chelsea

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
CSS(层叠样式表cascading style sheet)——CSS样式、基础选择器

一、CSS作用对页面的外观进行美化统一网站页面的风格实现内容和样式的分离,适合团队开发二、CSS语法规范三、CSS引入方式 CSS的3种样式表书写位置的不同分为：行内样式表（行内式）内部样式表（嵌入式） ...
复制链接

扫一扫