CSS笔记--- CSS概述;HTML引入CSS样式的三种方式;列表样式;绝对定位
Posted 猿头猿脑的王狗蛋
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了CSS笔记--- CSS概述;HTML引入CSS样式的三种方式;列表样式;绝对定位相关的知识,希望对你有一定的参考价值。
楔子:
1、什么是CSS,有什么作用?
1)CSS(Cascading Style Sheet):层叠样式表语言。
2) CSS的作用是:
修饰HTML页面,设置HTML页面中的某些元素的样式,让HTML页面更好看。
HTML还是主体,CSS依赖HTML。CSS的存在就是修饰HTML,所以新建的文件还是xx.html文件。
2、CSS需要掌握到什么程度?
第一,常见的CSS样式会写,第二,别人写的CSS样式能看懂。
3、在HTML页面中嵌套使用CSS的三种方式:
第一种方式:在标签内部使用style属性来设置元素的CSS样式,这种方式称为内联定义方式。
语法格式:
<标签 style="样式名:样式值;样式名:样式值;样式名:样式值;..."></标签>
第二种方式:在head标签中使用style块,这种方式被称为样式块方式。
语法格式:
<head>
<style type="text/css">
选择器
样式名 : 样式值;
样式名 : 样式值;
.....
选择器
样式名 : 样式值;
样式名 : 样式值;
.....
</style>
</head>
第三种方式:链入外部样式表文件,这种方式最常用(将样式写到一个独立的xxx.css文件当中,在需要的网页上直接引入css文件,样式就引入了)。
语法格式:
<link type="text/css" rel="stylesheet" href="css文件的路径" />
这种方式易维护,维护成本较低。
正文:
1、HTML引入样式的第一种方式:内联定义方式:
代码:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>HTML引入样式的第一种方式:内联定义方式</title>
</head>
<body>
<!--宽500像素,高60像素,背景颜色为“#CCFF”-->
<div style="width: 500px;height: 60px;background-color: #CCFFFF;"></div>
<br /><br />
<!--
样式display
为none,则图片有隐藏
为block,则显示图片
-->
<div style="width: 500px;height: 60px;background-color: #CCFFFF;display: none;"></div>
<br /><br />
<div style="width: 500px;height: 60px;background-color: #CCFFFF;
border-color: red;border-width: 1px;border-style: solid;"></div>
<br /><br />
<!--
border-color: red;border-width: 1px;border-style: solid;
可以整合为
border: red 1px solid;
-->
<div style="width: 500px;height: 60px;background-color: #CCFFFF;border: red 1px solid;"></div>
</body>
</html>
谷歌浏览器:
2、HTML中引入CSS样式的第二种方式:样式块:
代码:
<!doctype html>
<html>
<head>
<title>HTML中引入CSS样式的第二种方式:样式块</title>
<!--固定格式-->
<style type="text/css">
/*
id选择器
语法格式:
#id
样式名 : 样式值;
样式名 : 样式值;
样式名 : 样式值;
....
*/
#usernameErrorMsg
color : red;
font-size : 12px;
/*
标签选择器
语法格式:
标签名
同上(id选择器)
标签选择器作用的范围比id选择器广。
*/
div
background-color : black;
border : 1px solid red;
width : 100px;
height : 100px;
/*
类选择器
语法格式:
.类名
同上上(其他俩个选择器)
*/
.student
border : 1px solid red;
width : 400px;
height : 30px;
</style>
</head>
<body>
<!--
设置样式字体大小12px,颜色为红色
-->
<span id="usernameErrorMsg">对不起,用户名不能为空!</span>
<div></div>
<div></div>
<!--class相同的标签可以认为是同一类标签。-->
<br><br><br>
<input type="text" class="student"/>
<br><br><br>
<select class="student">
<option>专科</option>
<option>本科</option>
</select>
</body>
</html>
谷歌浏览器:
3、在HTML中使用CSS样式的第三种方式:引入外部独立的css文件:
html代码:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>在HTML中使用CSS样式的第三种方式:引入外部独立的css文件</title>
<!--引入css-->
<!--rel,type都是固定写法,href后加引入的css路径-->
<link rel="stylesheet" type="text/css" href="css/1.css" />
</head>
<body>
<a href="http://www.baidu.com">百度</a>
<span id="baiduSpan">点击我链接到百度哦!</span>
</body>
</html>
css代码:
/*
标签选择器
*/
a
/*
使下划线消失
*/
text-decoration : none;
/*
cursor : 鼠标样式,pointer是小手,hand也是,但是hand有浏览器兼容问题,建议使用pointer
*/
/*
id选择器
*/
#baiduSpan
/*
下划线;
鼠标光标变为小手
*/
text-decoration: underline;
cursor: pointer;
谷歌浏览器:(小手没截成功。。。)
4、列表样式:
代码:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>列表样式</title>
<style type="text/css">
/*
标签选择器
*/
ul
/*
让列表中的标志消失
list-style-type: none;
*/
/*
让列表中的标志变为空心圈圈
list-style-type: circle ;
*/
/*让列表中的标志变为黑心方块*/
list-style-type: square ;
</style>
</head>
<body>
<ul>
<li>中国
<ul>
<li>北京</li>
<li>上海</li>
<li>重庆</li>
</ul>
</li>
<li>美国</li>
<li>俄国</li>
</ul>
</body>
</html>
谷歌浏览器:
5、CSS样式的绝对定位:
代码:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>CSS样式的绝对定位</title>
<style type="text/css">
/*id选择器*/
#div1
background-color: red;
border: 1px black solid;
width: 300px;
height: 300px;
position : absolute; /*绝对定位*/
left: 100px;
top: 100px;
</style>
</head>
<body>
<div id="div1"></div>
</body>
</html>
谷歌浏览器:
以上是关于CSS笔记--- CSS概述;HTML引入CSS样式的三种方式;列表样式;绝对定位的主要内容,如果未能解决你的问题,请参考以下文章