css规则与选择器的知识点有哪些
这篇文章主要介绍“css规则与选择器的知识点有哪些”，在日常操作中，相信很多人在css规则与选择器的知识点有哪些问题上存在疑惑，小编查阅了各式资料，整理出简单好用的操作方法，希望对大家解答”css规则与选择器的知识点有哪些”的疑惑有所帮助！接下来，请跟着小编一起来学习吧！
一 什么是css?
●css指层叠样式表(cascading style sheets)
●样式定义如何显示html元素
●样式通常存储在样式表中
●把样式添加到html4.0中,是为了解决内容与表现分离的问题
●外部样式表可以极大提高工作效率
●外部样式表通常存储在css文件中
●多个样式定义可层叠为一
注意:在学习css之前,你需要具备html的基本知识.之前已经粗略介绍过.后边还会详细介绍
css允许你针对html元素应用特定的样式
css的主要好处在于,它允许你将样式和页面内容进行分离
仅适用html,样式和页面内容混在一起,这样的页面将会变得难以维护
所有的web页面样式都可以(也应该)从html文档中分离出来,建立成一个单独的css文件使用
二 内联 嵌入式 外部引用css
在web文档中插入一个样式表是内联样式的使用方法之一.使用内联样式,将独特的样式应用于单个元素
为了使用内联样式,将样式属性添加到相关的标签中.
下面的例子展示了如何创建一个灰色背景和白色文本的段落:
<p style="color:white; background-color:gray;">
This is an example of inline styling.
</p>
运行效果如下:
◆在<head>标签中,将内部样式定义在<style>元素中
例如:下面代码中的样式将作用在所有<p>段落中
<html>
<head>
<style>
p{
color:white;
background-color:gray;
</sytle>
</head>
<body>
<p>This is my first paragraph.</p>
<p>This is my second paragraph.</p>
</body>
</html>
结果所有的段落都变成白色字体和灰色背景
◆外部引用css:将所有的css样式保存在同一个后缀名.css的拓展文件中
然后通过html标签<link>在html页面的<head>部分将css文件引入
举例说明:
html代码:
<head>
<link rel="stylesheets" href="example.css">
</head>
<body>
<p>这是我的一个段落</p>
<p>这是我的第二个段落</p>
<p>这是我的第三个段落</p>
</body>
css部分:
p{
color:white;
background-color:gray;
所有段落都是统一的样式
●相对路径和绝对路径都可以用来定义css文件的href.在我们的示例中,路径是相对的,因为css文件和html文件位于同一目录下
三 css规则与选择器
css是由浏览器解释的样式规则,然后应用于文档中相应的元素.
样式规则有三部分:选择器 属性 属性值
例如,标题颜色可以定义为:
h2 { color:orange;}
选择器指向需要设置样式的html元素;
声明块包含一个或多个用分号分隔的声明;
每个声明都包含一个由冒号分隔的属性名称和值
例如:
h3{
color:red;
background:#fff;
●最常见和最易于理解的选择器是类型选择器.该选择器以页面上的元素类型为目标
例如,要定位页面上的所有段落
p{
color:red;
font-size:130%;
●css声明总是以分号结尾.而声明块则由大括号包围.
id选择器允许你设置具有id属性的html元素,而不管他们在文档树中的位置.
举例说明:
html部分:
<div id="intro">
<p>今年过节送什么?</p>
</div>
<p>w3cschool会员,送了都说好!</p>
css部分:
#intro{
color:white;
background-colot:gray;
要选择具有特定ID的元素,请使用"#",然后使用元素的id跟随它
class选择器以类似的方式工作.主要区别在于每个元素的id具有唯一性,id每个页面只能应用一次,而class可以在页面上多次使用.
●要选择具有特定类的元素,请使用"."符号,后跟该类的名称
避免使用数字来命名id和class
.mytext{
color:black;
设置class="mytext"的文本颜色为黑色
●这些选择器用于选择另一个元素的后代的元素.选择后代的层级时,你可以根据需要选择尽可能多的层级
例如,要仅定位"intro"部分第一段中的<em>元素
html部分:
<div id="intro">
<p class="first">这是一个<em>段落.</em></p>
<p>这是第二个段落.</p>
</div>
<p class="first">这个段落不在intro部分</p>
<p>这个段落也不在intro部分</p>
css部分:
#intro .first em{
color:pink;
background-color:gray;
因此,只有选中的元素<em>会受到影响.
#test p{
color:red;
上边的例子:为属于id="test"的元素的所有段落设置颜色为红色.
四 css注释
注释用于解释你的代码 ,浏览器会自动忽略注释 .类似于java中的多行注释
五 css的级联与继承
页面的最终外观是不同的样式结合的结果
通过样式的三个主要来源形成一个级联:
●由页面的作者创建的样式表
●浏览器的默认样式
●用户自定义的样式
继承是指属性在页面上的流动方式.除非另有定义,子元素通常会继承父元素的特征
例如:
<html>
<head>
<style>
body{
color:green;
font-family:Arial;
</style>
</head>
<body>
<p>
路人甲
</p>
</body>
</html>
结果:路人甲的颜色为绿色,样式效果和它的父元素<body>是一样的
由于段落标记(子元素)位于正文标记(父元素)内,因此它将采用指定给正文标记的任何样式.
到此，关于“css规则与选择器的知识点有哪些”的学习就结束了，希望能够解决大家的疑惑。理论与实践的搭配能更好的帮助大家学习，快去试试吧！若想继续学习更多相关知识，请继续关注编程网网站，小编会继续努力为大家带来更多实用的文章！
免责声明：
① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的，并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据，供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。
② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341
