文章目录
HTML是超文本标记语言,从 语义的角度描述页面 结构。
css 层叠样式表,从 审美的角度描述页面的 样式。
js JavaScript,从 交互的角度描述页面的 行为。
CSS
CSS是W3C协会为弥补HTML在显示属性设定上的不足而制定的一套扩展样式标准。CSS标准中重新定义了HTML中原来的文字显示样式,增加了一些新概念,如类、层等,可以对文字重叠、定位等。在CSS还没有引入到页面设计之前,传统的HTML语言要实现页面美化在设计上是十分麻烦的。例如要设计页面中文字的样式,如果使用传统的HTML语句来设计页面就不得不在每个需要设计的文字上都定义样式。CSS的出现改变了这一传统。
css是cascading style sheet层叠式样式表的简写。在制作网页时采用CSS样式,可以有效地对页面的布局、字体、颜色、背景和其他效果实现更加精确的控制。只要对相应的代码做一些简单的修改,就可以改变整个页面的风格。CSS大大提高了开发者对信息展现格式的控制能力,特别是在目前比较流行的CSS+DIV布局的网站中,CSS的作用更是举足轻重。
css的最新版本是css3
1、简单使用
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<title>Document</title>
<style type="text/css">
/*css都是写在style标签里面 style表示类型,text表示纯文本,css也是纯文本*/
/*p表示一个选择器*/
p{
/*颜色*/
color:red;
/*字体大小设置*/
font-size: 30px;
/*文本加下划线*/
text-decoration: underline;
/*字体宽度,加粗等*/
font-weight: bold;
/*文本对齐方式*/
text-align: center;
/*字体样式*/
font-style: italic;//斜体
}
/*h1标签表示一个选择器*/
h1{
color: blue;
/*背景颜色*/
background: pink;
font-weight: bold;
font-style: italic;
}
</style>
</head>
<body>
<h1>我是一个标题</h1>
<p>我是一个段落</p>
<p>我是一个段落</p>
</body>
</html>
2、CSS规则
在CSS样式表中包括3部分内容:选择符、属性和属性值。语法格式如下
选择符{属性:属性值;}
选择器{
k:v;
k:v;
k:v;
k:v;
}
参数说明
css分为两部分
- 选择器:怎么选。所有HTML语言中的标记都是通过不同的CSS选择器进行控制的。
- 属性:样式是什么类型。主要包括字体属性、文本属性、背景属性、
布局属性、边界属性、列表项目属性、表格属性等內容。其中一些属性只有部分浏览器支持,因此应用起来有些复杂。 - 属性值:为某属性的有效值。属性与属性值之间以“:”分隔。当有多个属性时,使用“;”分隔。
3、常用属性
color: red;//字体颜色;属性值可以是英语单词,比如red,blue,yellow,也可以是rgb、16进制
font-size: 40px;//字体大小
background-color:blue;//背景颜色
font-weight: bold;//字体加粗 weight(重量) bold:(粗) normal(正常)
font-style: italic;//字体样式,italic(斜体)
text-decoration: underline;//文本修饰。none:标准文本,underline:下划线,overline:上划线,line-through:定义穿过文本下的一条线,blink:闪烁的文本,inherit:继承父盒子的属性
4、选择器
CSS选择器常用的是标签选择器、类选择器、id选择器等。使用选择器可对不同的HTML标签进行控制,从而实现各种效果。下面对各种选择器进行详细介绍
1、标签选择器
HTML页面是由很多标签组成的,例如图像标签ing、超链接标签< a>、表格标签< table>等。CSS标签选择器就用于声明页面中哪些标记采用了哪些CSS样式。例如a选择器,就声明了页面中所有a标签的样式风格。
- 标签的名字:比如 h1选择器
- 所有的标签都可以做选择器,标签选择器选中的是当前页面的所有该标签的内容
- 不管这个标签藏的多深都可以被选上,选择的是所有,而不是某一个
举例
定义a标记选择器,在该标记选择器中定义超链接的字体与颜色。代码如下
<style type="text/css">
a{
font-size: 9px;
color: #f93;
}
</style>
2、类选择器
使用标签选择器非常快捷,但却有一定的局限性。声明一个标签选择器后,页面中所有该标签的内容都会有相应的变化。假如页面中有3个< h2>标记,如果想要每个< h2>的显示效果都不一样,使用标签选择器就无法实现了,这时就需要引入类选择器。类选择器的名称由用户自己定义,并以“.”开头,定义的属性与属性值也要遵循CSS规范。要应用类别选择器的HTML标记,只需使用 class属性来声明即可
- 任何标签都可以有class属性,class属性和id属性相似,只是id属性在同一个页面不可以设置相同的属性值,class属性可以
- class属性可以设置多个属性值,用空格隔开
- 应用在多个内容有这一些相同的样式,这些相同的样式就用类选择器来设置(类上样式,id行为)
举例
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
a{
font-size: 9px;
color: #f93;
}
.one{
font-family: 宋体;
font-size: 24px;
}
.tow{
font-family: 宋体;
font-size: 16px;
color: red;
}
.three{
font-family: 宋体;
font-size: 30px;
color: blue;
}
</style>
<title>css</title>
</head>
<body>
<a href="">我是a标签</a>
<h2 class="one">我的类选择器:one</h2>
<h2 class="tow">我的类选择器:tow</h2>
<h2 class="three">我的类选择器:three</h2>
</body>
</html>
效果图
3、id选择器
任何标签都可以有id属性,表示这标签的名字
名字可以随便取,要求:
- 只有包含字母,数字和下划线
- 必须以字母开头
- 不能和标签重名,一个页面中不能出现相同的id
- 命名id选择器要以“#”开始,后加HTML标记中的id属性值
举例
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
#frist{
font-size: 18px;
}
#second{
font-size: 24px;
}
#three{
font-size: 8px;
}
</style>
<title>css</title>
</head>
<body>
<hr/>
ID选择器<br/>
<h2 id="frist">我是id选择器:frist</h2>
<h2 id="second">我是id选择器:second</h2>
<h2 id="three">我是id选择器:three</h2>
</body>
</html>
效果图
class和id的区别
- class在页面上可以重复,id不可以
- 一个标签可以有多个class属性值(用空格隔开),id属性值不可以(只能有一个)
- class用于css,id用于js
5、高级选择器
将标签选择器,类选择器和id选择器结合起来组成高级选择器
分类
后代选择器,交集选择器,并集选择器
1、后代选择器
- 空格代表后代,.div1 p就是给.div1的后代所有的p设置样式。
- 选择的是后代,不一定是儿子。描述的是祖先结构
举例
给class选择器 div1的后代的所有p标签设置样式
<!DOCTYPE html>
<html>
<head>
<!-- 后代选择器p -->
<style type="text/css">
.div1 p{
color: red;
}
</style>
<title>高级选择器</title>
</head>
<body>
<!-- 给div添加一个class属性 -->
<div class="div1">
<p>我是段落1</p>
<p>我是段落1</p>
<p>我是段落1</p>
<div>
<a href="">我是a标签</a>
<p>我是段落4</p>
<p>我是段落5</p>
<p>我是段落6</p>
</div>
</div>
<div>
<p>我是段落1</p>
<p>我是段落2</p>
<p>我是段落3</p>
</div>
</body>
</html>
效果
空格可以多次出现
<!DOCTYPE html>
<html>
<head>
<!-- 后代选择器p -->
<style type="text/css">
.div1 .li2 p{
color:red;
}
</style>
<title>高级选择器</title>
</head>
<body>
<!-- 给div添加一个class属性 -->
<div class="div1">
<p>我是段落1</p>
<p>我是段落1</p>
<p>我是段落1</p>
<ul>
<li>
<p>我是一个段落</p>
<p>我是一个段落</p>
<p>我是一个段落</p>
</li>
<li class="li2">
<p>我是一个段落</p>
<p>我是一个段落</p>
<p>我是一个段落</p>
</li>
</ul>
</div>
<div>
<p>我是段落1</p>
<p>我是段落1</p>
<p>我是段落1</p>
</div>
</body>
</html>
就是.div1里面的后代.li2里面的p
后代选择器就是一种平衡,共性和特性的平衡,当要把某一个部分所有需要改变的时候使用
2、儿子选择器
儿子选择器就是2个选择器写一起用大于号隔开,只有直接子类有效
ie7兼容,ie6不兼容
<body>
<div>
<p>段落1</p>
<ol>
<li>
<p>段落2</p>
</li>
</ol>
</div>
</body>
css
<style type="text/css">
<!--表示div标签的直接子类p标签有效,其他的都无效(与div p:div的后代p完全不同)-->
div>p{
color: red;
}
</style>
效果:段落1变红,段落2没变红
3、交集选择器
交集选择器就是多个选择器写在一起,中间没有空格
<body>
<h3>我是一个标题</h3>
<h3 class="teshu">我是一个标题</h3>
<p class="teshu">我是一个标题</p>
<p>我是一个标题</p>
<p>我是一个标题</p>
</body>
css
<style type="text/css">
h3.teshu{
color: red;
}
</style>
同时满足两个条件,h3标签和类选择器teshu。
交集选择器可以连续交(从IE7开始兼容)
4、并集选择器
并集选择器就是多个选择器写一个,用逗号隔开
<body>
<h1>我是一个标题</h1>
<p>我是一个段落</p>
<ol>
<li>我是一个列表</li>
</ol>
</body>
css
<style type="text/css">
h1,li{
color: red;
}
</style>
效果,h1和li都变红
5、序选择器
带序列号的选择器(ie8开始兼容,ie7和ie6不兼容)
<body>
<ul>
<li>序列1</li>
<li>序列2</li>
<li>序列3</li>
<li>序列4</li>
<li>序列5</li>
<li>序列6</li>
<li>序列7</li>
</ul>
</body>
css
<style type="text/css">
<!--选择第一个li-->
ul li:first-child{
color: red;
}
</style>
只有序列1变红,其他的都不变红
<style type="text/css">
<!--最后一个li变红-->
ul li:last-child{
color: red;
}
</style>
6、下一个兄弟选择器
+表示选择下一个兄弟(ie7开始兼容)
7、通配符
*表示所有元素,注意:效率不高,如果页面上标签越多,效率越低
<style type="text/css">
*{
color: red;
}
</style>
css
<body>
<h1>标题</h1>
<p>段落</p>
<ol>
<li>列表1</li>
<li>列表2</li>
</ol>
</body>
效果:当前页面所有字体都变红
6、浏览器兼容问题
- IE:微软的浏览器,随着操作系统的安装,所以每个Windows都有ie浏览器
- windows xp操作系统安装的是ie6
- windows vista操作系统安装的是ie7
- windows 7操作系统安装的是ie8
- windows 8操作系统安装的是ie9
- windows 10操作系统安装的是edge