css,全称Cascading Style Sheets,中文名:层叠样式表。它是一种用来表现(表现,指的是这些内容在页面上的展示形式。比如说。布局,颜色,大小等等)HTML或XML等文件样式的计算机语言,是用于增强控制网样式并允许将样式信息与网页内容分离的一种标记性语言。CSS不仅可以静态地修饰网页,还可以配合各种脚本语言动态地对网页各元素进行格式化。 css通常要写成这样的格式: 代表的就是p标签的内容是大小为30px的红色字体。 运行效果 运行效果 运行效果 p{ 标签名选择器的格式是: id选择器的格式是: 运行效果 class类型选择器的格式是: 运行效果 选择器1,选择器2,选择器n{ 希望对看到这里的诸位有所帮助,如果喜欢这篇个人理解不妨点一个赞,谢谢~。
什么是css
css的语法规则
选择器{
属性:值;
属性:值;
}
选择器:浏览器根据“选择器”决定受CSS样式影响的HTML元素(标签,id或者类)
属性( property)是你要改变的样式名,并且每个属性都有一个值。属性和值被冒号分开,并由大括号包围,当有多个属性时需要使用分号隔开,这样就组成了一个完整的样式声明。还需要注意的是css的注释使用和java多行注释样式相同,和html的注释样式不同。
如:p{ /*为30px的红色字体*/ color:red; font-size:30px; }
css的三种使用方法
1.在标签上的style属性上直接设置
<span style="color: red;font-size:30px ">span</span>
缺点:
2.在head标签中,使用style标签来设置
<!--head标签中--> <style type="text/css"> div{ color: green; font-size: 40px; } </style> <!--body标签中--> <div>div1</div> <div>div2</div>
缺点:
3.使用单独的css文件,通过link标签引入设置
p{ color: black; font-size: 50px; }
<!--head标签中--> <link rel="stylesheet" type="text/css" href="1.css"/> <!--body标签中--> <p>p1</p> <p>p2</p>
全部代码1<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>css的使用方式</title> <!-- 第二种在head标签中使用--> <style type="text/css"> div{ color: green; font-size: 40px; } </style> <!--第三种使用css文件 --> <link rel="stylesheet" type="text/css" href="1.css"/> </head> <body> <!--第一种直接使用--> <span style="color: red;font-size:30px ">span</span> <!-- 第二种在head标签中使用--> <div>div1</div> <div>div2</div> <!--第三种使用css文件 --> <p>p1</p> <p>p2</p> </body> </html>
color: black;
font-size: 50px;
}在这里插入代码片
css的三种选择器
标签名选择器
标签名{
属性:值;
}
标签名选择器,可以决定哪种标签可以使用这个样式。
上文中我们介绍css的三种使用方式就是使用的这种选择器,这里不在重复介绍。id选择器
#d属性值{
属性:值;
}
id选择器,可以让我们通过id属性选择性的去使用这个样式。<!--head标签中--> <style type="text/css"> #id001{ color: red; font-size: 20px; } #id002{ color: blue; font-size: 30px; } </style> <!--body标签中--> <div id="id001">div</div> <div id="id002">p</div>
类选择器
lass属性值{
属性:值;
}
class类型选择器,可以通过class属性有效的选择性地去使用这个样式。和id选择器的区别是id属性的唯一的,class属性可以相同。<!--head标签中--> <style type="text/css"> .class001{ color: yellow; font-size: 40px; } </style> </head> <!--body标签中--> <span class="class001">span</span> <p class="class001">p</p>
将三种选择器组合起来
属性:值;
}
组合选择器可以让多个选择器共用同一个css样式代码,这里要记住这些选择器是或的关系不是且的关系。这样就可以更高效的使用css样式。
全部代码2<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>css选择器</title> <style type="text/css"> #id001{ color: red; font-size: 20px; } #id002{ color: blue; font-size: 30px; } .class001{ color: yellow; font-size: 40px; } </style> </head> <body> <!--id选择器--> <div id="id001">div1</div> <div id="id002">div2</div> <!--class选择器--> <span class="class001">span</span> <p class="class001">p</p> </body> </html>
本网页所有视频内容由 imoviebox边看边下-网页视频下载, iurlBox网页地址收藏管理器 下载并得到。
ImovieBox网页视频下载器 下载地址: ImovieBox网页视频下载器-最新版本下载
本文章由: imapbox邮箱云存储,邮箱网盘,ImageBox 图片批量下载器,网页图片批量下载专家,网页图片批量下载器,获取到文章图片,imoviebox网页视频批量下载器,下载视频内容,为您提供.
阅读和此文章类似的: 全球云计算