CSS构造块基础

193 阅读6分钟

一、CSS 继承样式

1.构造样式规则:样式中包含了定义网页外观的规则。每条规则都有两个主要部分:选择器和声明块。选择器决定那些元素受到影响;声明块由一个或多个属性-值对(每个属性-值对构成一条声明)组成,他们指定应该做什么。

selector {
	property:value;
	}

样式规则由选择器 selector(表示将对那些元素进行格式化)和声明块 { } 组成。声明块内的每条声明都是一个由冒号隔开、以分号结尾的属性-值对来完成。

 h1{
  background-color: yellow;
  color:aqua;
}

2.理解继承:继承是 CSS 里一个重要的概念。

<body>
<div>
	<h1>...</h1>
	<img src="" alt="">
	<p>...<em>...</em></p>
	<p><small>...</small></p>
</div>
如上代码示例,浏览器会将这份 HTML 理解为图所示的文档树,当为其某个元素应用 CSS 属性时,不仅影响该元素本身,还会影响其下分支元素。也就是说下层元素会继承其祖先元素的属性。所有内容都是 body 元素的后代,此代码用一个 div 包含了所有内容。进一步 em 和 small 元素都包含 一个 p 元素里,因此他们都是 p 元素的后代(同时也是 div 和 body 的后代)。
body{
	font-family: Verdana, Geneva, sans-serif;
}
div{
	border:1px solid #000;
	overflow: hidden;
	padding: 0 1em .25em;
}
p{
	color:#36c;
	font-weight: bold;
}
img{
	float: left;
	margin-right: 1em;
}

如这段样式设置代码中,font-family 会被继承,而 border 和 padding 则不会继承。color 和 font-weight 属性也会被继承,因此 em 和 small 元素里的文字也像其他段落文本一样显示为蓝色粗体文字,而并非浏览器默认样式。以下是会被继承的 CSS 属性:

○文本:

  • color(颜色,a元素除外)
  • direction(方向)
  • font(字体)
  • font-family(字体系列)
  • font-size(字体大小)
  • font-style(用于设置斜体)
  • font-variant(设置小型型大写字母)
  • font-weight(设置粗体)
  • letter-spacing(字母间距)
  • line-height(行高)
  • text-indent(用于设置首行缩进)
  • text-align(用于设置对齐方式)
  • text-transform(用于修改大小写)
  • visibility(可见型)
  • white-space(指定如何处理空格)
  • word-spacing(字间距) ○列表:
  • list-style(列表样式)
  • list-style-image(为列表指定定制标记)
  • list-style-position(确定列表标记的位置)
  • list-style-type(设置列表的标记) ○表格
  • border-collapse(控制表格相邻单元格边框是否合并为单一边框)
  • border-spacing(指定表格边框之间的空隙大小)
  • caption-side(设置表格标题位置)
  • empty-cells(设置是否显示表格中的空单元格)
  • ○页面设置(对于印刷)
  • orphans
  • page-break-inside
  • widows ○其他
  • cursor(鼠标指针)
  • quotes(用于指定引号样式)

3.属性的值

3.1:inherit 对于任何属性如果希望显示指出该属性的值与对应父元素对盖属性设置的值相同,就可以使用 inherit 值。例如有一个 article 元素设置了一个边框。边框通常不会被继承,因此 { boreder:inherit } 这条规则可以让段落获得相同的边框样式。

3.2预定义值:大多数 CSS 值可以使用预定义值,例如 border:none; 不需要加引号,这里的 none 就是一个预定义值。

3.3长度和百分数:很多 CSS 属性的值是长度,唯一例外的是 0,它可以不带单位。所有长度必须包含数字和单位,例如 3em、10px、60%。

3.4纯数字:只有极少数 CSS 属性接受不带单位的数字,最常见的就是 line-height、z-index、opacity。如line-height:1.5。

3.5 URL CSS 的属性允许开发人员指定另一个文件(尤其是图片)的 URL,background-image 就是一个这样的属性。在这种情况下,使用 url(file.ext),其中 file..ext 是目标的路径和文件名。

background:url(bg-pattern.png);

3.6 CSS颜色:可以使用颜色关键词以及十六进制、RGB、HSL、RGBA、HSLA、等格式表示的值中为 CSS 属性指定的颜色。

color:rgb(890,127);//89是颜色中红色的量,0颜色中绿色的量、127颜色中蓝色的量。
color#59007f//十六进制
backrgound-color:rgba(89,0,127,1);//和rgb一样
color:hsl(282,100%,25%);//282表示色相,100%为饱和度,25%亮度。

二、CSS操作样式表

创建样式将 CSS 应用到多个网页、单个网页或单独 HTML 元素。会通过三种方法实现这些应用:外部样式(首先方法)、嵌入样式表和内联样式(不推荐)。

1.创建链接外部样式表:创建一个新文件并以.css 为扩展名,为定义网页样式在 CSS 中编辑,将文档以纯文本格式保存在希望放置目录中。在 HTML 页面 head 部分,输入:

   <link rel="stylesheet" href="url.css" />

对外部样式表进行修改时,所有引用它的页面也会自动更新。

 !DOCTYPE html>
  <html lang="en">
  <head>
  <meta charset="UTF-8">
  <title>Document</title>

<link rel="stylesheet" href="url.css" /> //链接外部样式表

</head>
<body>
</body>
</html>

2.创建嵌入样式表:在HTML文档 head 部分输入 style元素,根据需要定义任意数量的样式规则。

<!DOCTYPE html>
  <html lang="en">
<head>
 <meta charset="UTF-8">
 <title>Document</title>

<style>
 img{
     border:4px solid red;
}
</style>

</head>
 <body>
</body>
</html>

3.应用内联样式:在希望进行格式化的 HTML 元素的开始标签中,输入style="样式规则"

<!DOCTYPE html>
 <html lang="en">
 <head>
 <meta charset="UTF-8">
 <title>Document</title>
</head>
<body>

 <script>
    <img src="xxx.jpg" style="border: 4px solid red" />
</script>

</body>
</html>

三、定义选择器

选择器可以对给定类型的所有元素进行样式化,有的选择器允许我们根据元素的类、上下文、状态等来应用格式化规则。选择器决定样式规则应用于那些元素:例如对所有 p 元素添加 Georgia 字体、12 像素高的格式,就需要创建一个只识别 p 元素而不是影响代码中 其他元素的选择器。如果要对每个区域中的第一个 p 元素设置特殊的缩进格式化,就需要创建一个稍微复杂一些的选择器,它只识别页面中每个区域的第一个 p 元素。

3.1选择器可以定义五个不同的标准来选择要进行格式化的元素:

□元素的类型或名称:

   h1{ color:red;}

□元素所在的上下文:

   h1 em{color:red;}

□元素的类或 ID (建议使用 class 类选择器):

.error{color:red;}//类
#gaudi{color:red;}//ID
strong.error{color:red;}
    

□元素的伪类或伪值:

a:link{color:red;}

□元素是否有某些属性和值:

a[title]{color:red'}

□选择第一个或最后一个子元素:

  li:first-child{color:red;}
  li:last-child{color:red;}

□ 选择第一个字母或者第一行:

p:first-letter{color:red;}//第一个字母
p:first-line{color:red;}//第一行

3.2按状态选择连接元素

按状态选择要格式化的链接元素步骤:输入 name 链接元素名称,

□link □visited □focus □hover □active

   a:link{
        color:red; //新的、未访问时链接显示为红色
    }
    a:visited{
        color:orange;//访问过的链接变为橙色
    }
    a:focus{
        color:purple;//链接获得焦点显示为紫色
    }
    a:hover{
        color:green;//当访问者鼠标指针停留在链接上时显示为绿色
    }
    a:active{
        color:blue;//当激活链接时变为蓝色
    }
    

指定元素组:

h1,
h2{
color:red;
}

组合使用选择器:

em{color:red}
.project em{color:red;}
组合
.architect .project em{ color:red;} //.architect父元素类名