css的样式很多,遇到需要用的时候去查找为好
css可以理解为html所有标签的化妆品,通过css可以给标签他们改变不同的外表
1.什么是css,有什么作用
CSS(Cascading Style Sheet):层叠样式表语言
CSS得作用:
修饰HTML页面,设置HTML页面中得某些元素得样式,让HTML页面更好看。
CSS好比是HTML得化妆品一样。
HTML还是主题,CSS依赖HTML。CSS得存在就是修饰HTML,所以新建得文件还是xx.html文件
2.CSS我们要去掌握到什么程度?
常见得CSS样式要求会写
别人写得CSS样式要能够看懂
3.在HTML页面中嵌套CSS的三种方式;
第一种方式:在标签内部使用Style属性来设置元素的CSS样式,这种方式称为内联定义方式。就是使得标签更加多元化,通过css来改变HTML的样子
语法格式:
<标签 style="样式名:样式值;样式名:样式值;样式名:样式值;..."></标签>
示例代码如下:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>html_css1</title>
</head>
<body>
<div style="width: 300px;height: 230px;background: brown;border-color: black;border-style: solid;"></div>
<br><br>
<!--另外一种写法,border后面几个属性是一样的可以直接写-样式值->
<div style="width: 300px;height: 200px;background: beige;border: 1px solid black;"></div>
</body>
</html>
第二种方式:在head标签中使用style块,这种方式被称为样式块方式。
语法格式:
<head>
<style type = "text/css">
选择器{
样式名:样式值;
样式名:样式值;
...
}
选择器{
样式名:样式值;
样式名:样式值;
...
}
<style>
</head>
示例代码块
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>html_css2,第二种方式:样式块</title>
<style>
/*css语句块注释方法,同时style之间的代码块为css代码*/
/*id选择器*/
/*语法格式
#id{
样式名:样式值;
样式名:样式值;
样式名:样式值;
}-->*/
#name{
color: red;
font-size: 12px;
}
/*标签选择器*/
/*语法格式
标签名字{
样式名:样式值;
样式名:样式值;
样式名:样式值;
}
标签选择器作用的范围比id选择器广,只要是该标签都要被作用
*/
div{
background: #FF0000;
border: 1px;
width: 100px;
height: 100px;
}
/*类选择器*/
/*自己确定一个类,起个类名一类的都可以被作用
语法格式:
.类名{
样式名:样式值;
样式名:样式值;
样式名:样式值;
}
*/
.myclass{
border: solid red;
color: #FF0000;
}
</style>
</head>
<body>
<!--需求:下面字体大小为12px,字体颜色为红色-->
<span id="name">用户名不能为空</span>
<div></div>
<div></div>
<div></div>
<div></div>
<br><br>
<input type="text" class="myclass">
<br>
<select class="myclass">
<option>专科</option>
<option>ben科</option>
</select>
</body>
</html>
第三种方式:链入外部样式表文件,这种方式最常用。(将样式写到一个独立的xxx.css文件种,在需要的网页上直接引入css文件,样式就引入了)
语法格式
<link type = "text/css" rel = "stylesheet" href = "css文件的路径" />
这种方式易维护,维护成本较低,改了外部的CSS文件所有的引用他的html文件也都一起改了,非常的方便
示例代码
css代码:
#name{
/*去除掉下划线*/
text-decoration: none;
}
/*cursor:鼠标样式,pointer是小手,hand也是,但是hand有浏览器有浏览器兼容问题。建议使用Pointer*/
#text{/*使得文字有下划线,并且虚浮为手形状*/
text-decoration: underline;
cursor: pointer;
}
html代码,在html文件里直接引入css文件即可:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>在HTML中使用css样式的第三种方式:引入外部独立的css文件</title>
<!--引入css-->
<link rel="stylesheet" type="text/css" href="css/1.css"/>
</head>
<body>
<a href="http://www.baid.com" id= "name">百度<a/>
<span id="text">点我点我!</span>
</body>
</html>