CSS

语法

  • CSS规则由两个主要的部分构成:选择器,以及一条或多条声明
  • 选择器通常是你需要改变样式的HTML元素
  • 每一条声明有一个属性和一个值构成
  • 实例: h1 {color: blue; font-size:12px;}

选择器

标签选择器

  • 选择器的名字代表html页面上的标签
<style type="text/css">
p{
    font-size:14px;
}</style>
<body>
	<p>css</p>
</body>

它会

标签里面的字体大小设为14px

ID选择器

  • 过id找到标签,一个html文件中id不能重复
<head>
<title>Document</title>
<style type="text/css">
#mytitle
{
    border:3px dashed green;
}
</style>
</head>
<body>
	<h2 id="mytitle">你好</h2>
</body>

类选择器

  • 类选择器可以被多种标签使用。
  • 同一个标签可以使用多个类选择器。用空格隔开。
  • 如果一个多类选择器包含类名列表中没有的一个类名,匹配就会失败。
<p class="important warning">
This paragraph is a very important warning.
</p>

一个 class 值中可能包含一个词列表,各个词之间用空格分隔。这两个词的顺序无关紧要,写成 warning important 也可以。
我们假设 class 为 important 的所有元素都是粗体,而 class 为 warning 的所有元素为斜体,class 中同时包含 important 和 warning 的所有元素还有一个银色的背景 。就可以写作:

.important {font-weight:bold;}
.warning {font-style:italic;}
.important.warning {background:silver;}

分组选择器

每个选择器用逗号分隔,所有选择气选择相同的样式。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<style>
h1,h2,p
{
	color:green;
}
</style>
</head>

<body>
<h1>Hello World!</h1>
<h2>Smaller heading!</h2>
<p>This is a paragraph.</p>
</body>
</html>

102

嵌套选择器

  • p{ }: 为所有 p 元素指定一个样式。
  • .marked{ }: 为所有 class="marked" 的元素指定一个样式。
  • .marked p{ }: 为所有 class="marked" 元素内的 p 元素指定一个样式。
  • p.marked{ }: 为所有 class="marked"p 元素指定一个样式。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<style>
p
{
	color:blue;
	text-align:center;
}
.marked
{
	background-color:red;
}
.marked p
{
	color:white;
}
p.marked{
    text-decoration:underline;
}
</style>
</head>

<body>
<p>这个段落是蓝色文本,居中对齐。</p>
<div class="marked">
<p>这个段落不是蓝色文本。</p>
</div>
<p>所有 class="marked"元素内的 p 元素指定一个样式,但有不同的文本颜色。</p>
	
<p class="marked">带下划线的 p 段落。</p>
</body>
</html>

103

px em rem % vw vh vm

  • px :像素,通过px可以设置固定的布局或者元素大小,缺点是没有弹性。
  • em: 子元素字体大小的em是相对于父元素字体大小
  • rem: em和rem的区别一句话概括:em相对于父元素,rem相对于根元素。
  • %: 百分比,相对于父元素
  • vw:相对于视口的宽度。视口被均分为100单位
  • vh:相对于视口的高度。视口被均分为100单位
  • vm:相对于视口的宽度或高度中较小的那个

vh和%区别

  • vh就是当前屏幕可见高度的1%,也就是说height:100vh == height:100%;

  • 当元素没有内容时候,设置height:100%,该元素不会被撑开,此时高度为0;

    但是设置height:100vh,该元素会被撑开屏幕高度一致。

vw 和 %区别

  • 在pc中100vw会比100%多一个滚动条的宽度,原因是vw计算的是整个视口的宽度,包括滚动条,而100%计算宽度不包括滚动条。但是在移动端开发不存在这个问题,因为移动端滚动条不占位置。

评论

Your browser is out-of-date!

Update your browser to view this website correctly. Update my browser now

×