一,CSS的主要了解内容
CSS 语法由三部分构成:选择器、属性和值:
selector {property: value}
body {color: blue}
选择器 (selector) 通常是你希望定义的 HTML 元素或标签,属性 (property) 是你希望改变的属性,并且每个属性都有一个值。属性和值被冒号分开,并由花括号包围,这样就组成了一个完整的样式声明(declaration):
1.选择器
2.css常用属性介绍
3.div + css 重点
1.什么是CSS
层叠样式表(CSS)是描述标记语言页面格式的标准(或语言),CSS 使开发人员能够分离内容和可视元素,以实现更好的页面控制和灵活性 CSS 文件通常通过 HTML 文件中的链接附加到 HTML 文件。
2.学习 div + css 优点
a、能够使代码bai精简,使用div+css布局使代码很是精简
b、提升了网页访问速度,div+css布局较传统的Table布局比较,减少了许多代码,其浏览访问速度自然得以提升,从而提升了网站的用户体验度。
c、a有利于优化。采用div-css布局的网站对于搜索引擎很是友好,简洁、结构化的代码更加有利于突出重点和适合搜索引擎抓取b。
d、浏览器兼容性 。DIV+CSS更容易出现多种浏览器不兼容的问题,主要原因是不同的浏览器对web标准默认值不同。
e、需要注意的是,网页不喜欢一个页面有太多的css代码,否则同样会影响蜘蛛的爬行,影响搜索引擎的收录,所以采用外部调用的方式调用CSS是非常不错的方法。
f、若非必须太多花哨的网站,采用CSS布局,同样可以到达所想要的效果。如网站导航中的文字颜色变化、css下拉菜单等。
4.什么是选择器,为什么要学选择器
CSS选择器用于选择你想要的元素的样式的模式。
对HTML页面中的元素实现一对一,一对多或者多对一的控制,这就需要用到CSS选择器。
HTML页面中的元素就是通过CSS选择器进行控制的
5. 选择器
这里有个小分类
基本选择器 标签选择器 类选择器 Id选择器
复合选择器 后代选择器 并集选择器 全局选择器
这六种选择器使用情况比较多,后代选择器在大型
a. 类选择器 前面以”.”来标志
<style type="text/css">
.demoDiv{
color:#FF0000;
}
</style>
<div class="demoDiv">
<p class="demoDiv">
.的位置是选中,然后设置属性与属性值
<div>,<p>中是定义class的位置
b. 标签选择器
决定哪些标签采用相应的CSS样式
<style type="text/css">
p{
color: blue;
}
</style>
<p class="test">齐天大圣</p>
标签选择器的话 直接
<style type="text/css">
p{
color: red;
}
</style>
<p class="test">
齐天大圣
啦啦啦
</p>
使用标签名定位就行 eg: p{} span{}
c. Id选择器
根据元素ID来选择元素,具有唯一性,这意味着同一id在同一文档页面中只能出现一次
<style type="text/css">
#teste{
color: brown;
}
</style>
<div id = "teste">
啦啦啦
</div>
这里给三个基本选择器的一个运行情况,这里是整个代码
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
h3{
color: yellow;
}
.test{
color: green;
}
#teste{
color: brown;
}
</style>
</head>
<body>
<div id = "teste">
Id选择器
</div>
<p class="test">
类选择器
</p>
<h3 >
标签选择器
</h3>
</body>
</html>
根据不同选择器的选择一一表明了我们期待的颜色与选择标签
这里三个基本标签就免不了遇到优先级问题
你也可以一一测试 他们优先级情况 Id>类选择器>标签选择器>默认样式
默认样式就是黑白体的系统默认情况
d. 后代选择器
也称为包含选择器,用来选择特定元素或元素组的后代,将对父元素的选择放在前面,对子元素的选择放在后面,中间加一个空格分开。后代选择器中的元素不仅仅只能有两个,对于多层祖先后代关系,可以有多个空格加以分开,如id为a、b、c的三个元素,则后代选择器可以写成#a #b #c{}的形式,只要对祖先元素的选择在后代元素之前、中间以空格分开即可。
<style>
.father.child{
color:#0000CC;
}
</style>
<p class="father">
黑色
<label class="child">蓝色
<b>也是蓝色</b>
</label>
</p>
e. 交集 , 并集选择器
简单说就是令代码结构更加简洁,可以一起修改的属性
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>高级选择器</title>
<style>
/*交集选择器*/
/*既是P标签,类名称text的元素字体变为红色*/
p.text{
color: red;
}
/*并集选择器*/
/*让container下的所有元素内容为蓝色*/
#container p,span,em,strong{
color: blue;
}
</style>
</head>
<body>
<!--交集选择器-多个选择器包含的元素-->
<p>好好学习1</p>
<p class="text">好好学习2</p>
<p class="text">好好学习3</p>
<p>好好学习4</p>
<!--并集选择器-多个选择所有匹配的元素-->
<div id="container">
<p>好好学习1</p>
<span>好好学习2</span><br>
<em>好好学习3</em><br>
<strong>好好学习4</strong>
</div>
</body>
</html>
f . 全局选择器 把所有html表签的默认样式设置到初始样式
设置所有标签使用同一样式,用*表示。如:*{margin:0;padding:0}
通配符选择器 一般在开发中将其设置在public.css文件中 *{margin:0 0;} 一般用来重置样式
这里还有其他一些选择器,就不做具体介绍了
g. 子选择器
子选择器(child selector)仅是指它的直接后代,或者你可以理解为作用于子元素的第一个后代。而后代选择器是作用于所有子后代元素。后代选择器通过空格来进行选择,而子选择器是通过“>”进行选择
h. 伪类选择器
有时候还会需要用文档以外的其他条件来应用元素的样式,比如鼠标悬停等。这时候我们就需要用到伪类了
i. 相邻同胞选择器
我们可能还希望找到兄弟两个当中的一个,如一个标题h1元素后面紧跟了两个段落p元素,我们想定位第一个段落p元素,对它应用样式。我们就可以使用相邻同胞选择器
CSS
h1 + p {color:blue}
HTML
<h1>brother</h1>
<p>brother</p>
当然选择器肯定不是只有这些,这些是使用情况比较广泛的几种,如果遇到其他情况可以去文档里面寻找,或者百度搜寻
6.style标签 与style属性 style属性值
正如上面css优点里面写的内部代码会加重搜索器的效率 ,所以我们更加提倡使用外部css代码
1.创建一个css文件,建立外部样式表
.css
#parent span,h4{
color: rgb(200,25,23);
}
#parent li{
color: #008000;
}
.testes{
color: yellow;
}
这里是css里面具体情况,不要将 style 样式也写入那样会报错的哦
那现在的情况就是在html里面如何访问外部数据了
CSS引入到html中有以下三种方法:1- 内联、2-内部样式表、3-外部样式表
内联
<body style="background-color: gray">
在标签内style=" "
内部样式表
<style type="text/css">
p {color:red;} <!--内部样式表-->
</style>
用style标签,将要进行css控制的属性放在标签内
外部样式表 (两种)
<link rel="stylesheet" type="text/css" href="mystyle.css">
在head标签内,并且用link标签来引入你要加载的css文件
<style type="text/css">
@import url(wcss.css); /*这里是通过@import引用CSS的样式内容*/
</style>
url就是href 的路径,两种引用外部样式表的情况
优先级:靠近优先 层叠情况 相当于一层层叠加,后运行的会将前面的覆盖掉,所以是靠近优先