HTML和CSS
1、Html就是超文本标记语言的简写,是最基础的网页语言
2、Html是通过标签来定义的语言,代码都是由标签组成。
3、Html代码不用区分大小写
4、Html代码由<html>开始</html>结束。里面由头部分<head></head>和体部分<body></body>两部分组成。
5、头部分是给Html页面增加一些辅助或者属性信息,它里面的内容会最先加载
6、体部分是真正存放页面数据的地方。
多数标签都是由开始标签和结束标签,其中有个别变迁因为只有单一功能,或者没有要修饰的内容可以在标签内结束。
想要对被标签修饰的 内容进行更丰富的操作,就用刀了标签中的属性,通过对属性值的改变,增加了更多的效果选择。
属性与属性值之间用"="连接,属性值可以用双引号或者不用引号,一般都会用双引号,或公司规范书写规范
格式:<标签名 属性名="属性值">数据内容</标签名>
<标签名 属性名="属性值" />
操作思想:
为了操作数据,都需要对数据进行不同标签的封装,通过标签中的属性对封装的数据进行操作。标签就相当于一个容器。对同期中的数据进行操作,就是在不断的改变容器的属性值
常见标签:
其他标签
<base>
href 属性:指定网页左右的超链接的目录,可以是本地目录,也可以是网络目录。注意值的结尾处已定窑用/表示目录,只作用于相对路径的超链接文本。target 属性:指定打开超链接的方式。如:_blank表示所有的超链接都用新窗口打开显示
<meta>
name属性:网页的描述信息,当取keywords时,content属性的内容就作为搜索引擎的关键字进行搜索
http-equiv 属性:模拟HTTP协议的响应头
如:<meta http-equiv="refresh" content="2" url="http://www.baidu.com">
表示2秒刷新一次此页面
<link>
rel 属性:描述目标文档与当前文档的关系
type 属性:文档类型
media:指定目标文档在哪个地方起作用
如:
<link rel="stylesheet" type="text/css" href="a.css">
<marquee>
direction属性 left down up right
behavior 属性 scroll alternate slide
<pre>可以将文本内容按在代码区的样子显示在页面上</pre>
Css介绍
CSS是层叠样式表(Cascading Style Sheets)用来定义网页的显示效果,可以解决html代码对样式定义的重复,提高了后期样式代码的可维护性。并增强了网页的显示效果功能。简单一句话:CSS将网页内容和显示样式进行分离,提高了显示功能。
那么CSS和html是如何在网页代码中相结合的呢?
通过四种方式:
1、style属性方式
style属性方式:
利用标签中style属性来改变每个标签的显示样式。
例:<p style="background-color:#ff0000;color:#ffffff">p标签显示内容</p>
2、style标签方式(内嵌方式)
在head标签里加入style标签,对多个标签进行统一修改。
该方式可以对单个页面的样式进行统一设置,但对于局部不够灵活
<head>
<meta charset="UTF-8">
<title>CSSdemo</title>
<style type="text/css">
p {color: aqua;}
</style>
</head>
<body>
<p>这是显示head标签里面设置style标签的效果</p>
</body>
3、导入方式
前提是已经存在一个定义好的CSS文件,网页的一部分样式需要用到,name就用刀这种方式。例:
<head>
<meta charset="UTF-8">
<title>CSSdemo</title>
<style type="text/css">
@import url(div.css);
</style>
</head>
<body>
<div></div>
</body>
注:url括号后面必须要用分号结束,如果导入进来的样式与本页面定义的样式重复,以本页定义样式为准。
4、链接方式
通过head标签中的link标签来实现,前提也是先要有一个已定义好的css文件例:
<html lang="en">
<head>
<meta charset="UTF-8">
<title>CSSdemo</title>
<link rel="stylesheet" href="div.css" type="text/css"/>
</head>
<body>
<div></div>
</body>
</html>
注:可以通过多个link标签链接进来多个css文件,重复样式以最后链接进来的css样式为准。
5、样式优先级
自上到下,由外到内,优先级由低到高。
标签选择器<类选择器<id选择器<style属性
6、总结CSS代码格式
选择器名称 {属性名:属性值;属性名:属性值;......;}
属性与属性之间用分号隔开
属性与属性值之间用冒号连接
如果一个属性有多个值的话,name多个值用空格隔开。
7 、选择器
就是指定css要作用的标签,哪个标签的名称就是选择器。意为:选择哪个容器。选择器有三种:
a、html标签名选择器。使用的就是html的标签名。
b、class选择器。其实使用的标签中的class属性。
c、id选择器。其实使用的是标签中的id属性。
每一个标签都定义了class属性和id属性,用语对标签进行标识,方便对标签进行操作。在定义中,多个标签的class属性值可以相通,而id值要唯一,因为JavaScript中经常用。
8、class选择器
在标签中定义class属性并赋值,通过标签名.class值,对该标签进行样式设置。
例:
在相同标签设置不同样式的时候,用class进行区分。
p.pclass1{color:red;}
p.pclass2{color:yellow;}
<p class="p.pclass1">样式1</p>
<p class="p.pclass2">样式2</p>
不同标签进行相同设置的时候,用class进行统一定义。
.classname{color:blue;}
<p class="classname">p样式</p>
<div class="classname">div样式</div>
9、id选择器
与class选择器蕾丝,但格式不同,选择器的名称为#id值。
例:
#pid {color:red;}
<p id="pid">id设置样式</p>
注:多个标签同样可以定义相同的id值,但是对于JavaScript对标签元素的获取酒会出错,所以形成习惯,确保id值的唯一性对于以后的数据库设计也会有好处。