您的位置：首页 > Web前端

小白web前端开发--学习笔记三

2017-06-26 10:59 876 查看

css基础知识

css简介

层叠样式表(英文全称：Cascading Style Sheets)是一种用来表现HTML（标准通用标记语言的一个应用）或XML（标准通用标记语言的一个子集）等文件样式的计算机语言。CSS不仅可以静态地修饰网页，还可以配合各种脚本语言动态地对网页各元素进行格式化。

要深刻理解层叠样式表，样式表说明css是负责美化网页的；而层叠表示网页可以定义多层样式，样式可以被覆盖而不会被干掉。

css样式的3种用法

在标签中使用style属性,如下：

<h1 style="color:red;">Hello,World</h1>

在头部的style标签中定义：

<style>

p {

color: blue;

}

</style>

在头部通过link标签引用外部css文件，如：

<link rel="stylesheet" href="01.css">

css的3种基础选择器

1. html选择器

用法：在style属性中直接利用标签进行设置，如下：

p {
color: red;
}

需要注意的点：

通过html标签名来选择元素

所有的html标签都可以当做选择器

无论标签藏多深都会被选中

选择的是所有的标签而不是具体某个标签。所以说我们通过html标签选择器来设置的都是一些共性问题。

2. . class选择器

用法：对标签的class名进行设定。

.class{
color:blue;
}

需要注意的点：

1.任何的标签都可以使用class属性(class属性也是一个全局属性)

2.class属性名可以重复使用

3.一个class属性中，可以有多个class属性值。

3. id选择器

用法：利用标签的id属性进行设定：

#id{
color:blue;
}

需要注意的点：

任何的标签都可以有id属性和属性值(因为id是一个全局属性)。id命名不能随意的命名。

大小写敏感，id的名字中可以有数字字母下划线，但是要以字母开头。

驼峰命名法分为小驼峰命名和大驼峰命名。

testHeader是小驼峰，TestHeader是大驼峰，或test-header也行

id名不能重复，id名是唯一的。

综合选择器

后代选择器

如：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
/*后代选择器，选中所有的后代的span标签*/
.d1 span {
color: blue;
}
</style>
</head>
<body>
<div class="d1">
<span>我是儿子span</span>
<div class="son">
<span>我是孙子span</span>
<div class="d2">
<span>我是重孙span</span>
</div>
</div>
</div>
</body>
</html>

设定div标签的所有p标签为红色。

交集选择器

例：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
/*选中div，并且这个div的class名叫d1*/
div.d1 {
color: red;
}
</style>
</head>
<body>
<div class="d1">我是第一个div</div>
<div class="d1">我是第二个div</div>
</body>
</html>

选中div标签中有特定名字的div标签

并集选择器

例：

<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
.d1,p,em {
color: red;
}
</style>
</head>
<body>
<div class="d1">我是div标签</div>
<em>我是em标签</em>
<p>我是p标签</p>
</body>
</html>

选定需要设置相同样式的所有标签

子元素选择器

例：

<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
#fa>em {
color: red;
}
</style>
</head>
<body>
<div id="fa">
<em>我是二级em</em>
<div class="son">
<em>我是三级em</em>
<div>
<em>我是四级em</em>
</div>
</div>
</div>
</body>
</html>

序列选择器

例：

<!DOCTYPE html>
<html lang="en">
<head>
meta charset="UTF-8">
title>Document</title>
<style>
ul li:first-child {
color: red;
}
ul li:last-child {
color: blue;
}
</style>
</head>
<body>
<ul>
<li>li1</li>
<li>li2</li>
<li>li3</li>
<li>li4</li>
<li>li5</li>
</ul>
</body>
</html>

相邻兄弟选择器和普通兄弟选择器

例：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
/*相邻兄弟选择器*/
div + p {
color: red;
}/*普通兄弟选择器*/
div ~ p {
color: red;
}</style>
</head>
<body>
<div>我是div</div>
<p>我是p标签</p>
<p>我是第二个p标签</p>
</body>
</html>

继承和层叠

.继承：父元素的某些css属性会被子元素无条件的继承过去。

关于文字的css属性都可以进行继承，如color，text-，line-，font-等

层叠：层叠解决的是css冲突的问题。

比较权重来解决层叠问题。

!important 能够把”单独属性”的权重变为无限大。尽量少用。

选择器冲突

html选择器，class选择器，id选择器的权重是id>class>html。因此单个的这3中选择器发生冲突时以id属性定义的样式为准。如下：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
/*谁更精确就听谁的*/
div {
color: blue;
}
#test {
color: green;
}
.d1 {
color: red;
}
</style>
</head>
<body>
<div class="d1" id="test">我是div标签</div>
</body>
</html>

此时显现的颜色为green。

当这3种选择器的数量不一样，则将id,class,html这3种选择器的数量依次进行比较，权重大者获胜。如：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
/*id  class html选择器的权重比较*/
#box1 .hei2 p {  /* 1   1   1*/
color: red;
}
div div #box3 p {  /*1  0  3*/
color: green;
}
div.he1 div.he2 div.he3 p { /*0 3 4 */
color: blue;
}
</style>
</head>
&
4000
lt;body>
<div class="he1" id="box1">
<div class="he2" id="box2">
<div class="he3" id="box3">
<p>文字颜色</p>
</div>
</div>
</div>
</body>
</html>

经过权重比较后，文字颜色为red。

若权重相同，则采用覆盖原理，写在后面的样式会覆盖前面的样式。

如：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
/*两种样式的权重一样，后面的会覆盖前面的*/
#box1 .he2 p {
color: red;
}#box2 .he3 p {
color: blue;
}
</style>
</head>
<body>
<div class="he1" id="box1">
<div class="he2" id="box2">
<div class="he3" id="box3">
<p>文字颜色</p>
</div>
</div>
</div>
</body>
</html>

此时文字颜色为blue。

若选择器没有直接选中，则谁描述的详细谁获胜，如：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
#he3 {
color: blue;
}
#he1 #he2 {
color: red;
}
</style>
</head>
<body>
<div class="box" id="he1">
<div class="box" id="he2">
<div class="box" id="he3">
<p>猜猜这是什么颜色?</p>
</div>
</div>
</div>
</body>
</html>

此时虽然#he1 #he2的权重大于#he3，但#he3描述的更详细。因此文本颜色为blue。

综上:选择器的选择问题可以用下图表示：

权重比较

块级元素和行内元素

行内元素部不能够设置宽度和高度。行内元素的宽度和高度是标签内容的宽度和高度。块级元素可以设置宽度和高度。

块级元素会独占一行。而行内元素却不能够独占一行，只能和其他的行内元素共用一行。

如果块级元素不设置宽度，那么块级元素会自动的占满父元素的全部宽度。

常用的块级元素有div, form, table, header, aside, section, article, figure, figcaption, h1~h6, nav, p, pre, blockqoute, canvas, ol, ul, dl。常用的行内元素有span, a, img, label, input, select, textarea, br, i, em, strong, small, button, sub, sup, code。

行内元素和块级元素之间的转换

行转块–>block

块转行–>inline

行内块元素–>inlin-block

如下代码：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
.d0 {
width: 300px;
height: 300px;
background-color: red; /*背景颜色*/
display: inline; /*把块级元素变成了行内元素*/
}
.s1 {
width: 300px;
height: 300px;
background-color: blue;
display: block;/*将行内元素变成块级元素*/
}

em {
width: 300px;
height: 300px;
background-color: green;
display: inline-block; /*行内块元素*/
}

.d1 {
width: 300px;
height: 300px;
background-color: red;
display: inline-block;
/*float: left;浮动*/
}
.d2 {
width: 300px;
height: 300px;
background-color: blue;
display: inline-block;
/*float: left;*/
}
body {
background-color: #000;
}
</style>
</head>
<body>
<div class="d0">Hello,Div</div>
<span class="s1">hello,Span</span>
<em>hello,Em</em>
<a href="##">百度</a>
<hr>
<div class="d1"></div>
<div class="d2"></div>

</body>
</html>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签： web前端开发

相关文章推荐

新的分享

章节导航