css基础学习笔记

最新推荐文章于 2024-05-06 21:08:34 发布

yubo_725

最新推荐文章于 2024-05-06 21:08:34 发布

阅读量578

点赞数

分类专栏： HTML、CSS、JavaScript 文章标签： css

本文链接：https://blog.csdn.net/yubo_725/article/details/45171527

版权

HTML、CSS、JavaScript 专栏收录该内容

9 篇文章 0 订阅

订阅专栏

1、css的语法选择器，"#"选择的是id对应的属性，"."选择的是class对应的属性，如下面的代码所示：

<!DOCTYPE html>
<html>
<head>
<style type="text/css">
#param1{
	background-color: #00ff00;
}
.param2{
	background-color: #00aaff;
}
</style>
</head>
<body>
	<p id="param1">this is param1</p>
	<p class="param2">this is param2</p>
</body>
</html>

浏览器中看到的效果为：

2、使用css样式有两种方法：引用外部文件或在文件内部使用，引用外部文件需要如下代码：

<link rel="stylesheet" type="text/css" href="test.css">

其中test.css为引用的外部css文件

在文件内使用就如第一条的代码中所示

3、如果一个元素指定了多个属性值，则需要用分号将不同的属性隔开，如下代码所示：

.param2{
	background-color: #00aaff;
	color : blue;
}

4、css设置背景，有如下的一些属性：

div{
	background-color: #00aaff;
	background-image : url("test.png");
	background-repeat : no-repeat;
}

background-color指定背景颜色，background-image指定背景图片，background-repeat指定背景图片是否重复。

5、css文本格式。如下代码所示：

<!DOCTYPE html>
<html>
<head>
<style type="text/css">
div{
	color : red; /*文字颜色，也可以用RGB颜色*/
	text-align : left; /*获取取值left、right*/
	text-decoration: line-through; /*或者取值overline、underline*/
}
p{
	/*指定文本的大小写，uppercase为大写,lowercasez为小写,capitalize为首字母大写*/
	text-transform: uppercase;
	text-indent: 50px;
}
</style>
</head>
<body>
	<div>
		<p>this is param1</p>
	</div>
</body>
</html>

6、字体格式。如下代码所示：

p{
	font-style : italic;
	font-size : 30pt;
	font-weight : bold;
	font-family : "微软雅黑" "Times New Roman" "宋体";
}

font-style指定文本倾斜，font-size指定字体大小，单位可以是px、pt、em等，font-weight指定字体加粗，font-family指定文本的字体，这里可以指定多个字体，如果第一种字体不被浏览器支持，则后面的字体会被使用

7、css列表样式，如下代码：

<!DOCTYPE html>
<html>
<head>
<style type="text/css">
ul.a{
	list-style-type : circle;
}
ul.b{
	list-style-type : square;
}
ul.c{
	list-style-type : upper-roman;
}
</style>
</head>
<body>
	<ul class="a">
		<li>hello</li>
		<li>world</li>
		<li>nihao</li>
	</ul>
	<ul class="b">
		<li>hello</li>
		<li>world</li>
		<li>nihao</li>
	</ul>
	<ul class="c">
		<li>hello</li>
		<li>world</li>
		<li>nihao</li>
	</ul>
</body>
</html>

通过list-style-type属性指定ul的样式，效果如下：

8、css表格样式。如下代码所示：

<!DOCTYPE html>
<head>
<style type="text/css">
table{
	border:1px solid #000000;
	width: 300px; 
	background-color: #aaaaff; /*表格的背景颜色*/
	color : red; /*表格中的文字颜色*/
}
td{
	text-align: center; /*单元格中央对齐*/
	padding: 20px; /*单元格内边距*/ 
}
caption{
	font-weight: bold;
	color: blue;
	font-size: 20px;
}
</style>
</head>
<table>
	<caption>Person Info</caption>
	<tr>
		<th>NAME</th>
		<th>AGE</th>
		<th>SEX</th>
	</tr>
	<tr>
		<td>Tom</td>
		<td>21</td>
		<td>male</td>
	</tr>
	<tr>
		<td>Lucy</td>
		<td>19</td>
		<td>female</td>
	</tr>
	<tr>
		<td>Jack</td>
		<td>22</td>
		<td>male</td>
	</tr>
</table>

效果如下图：

9、边框，如下代码：

<!DOCTYPE html>
<head>
<style type="text/css">
p.p1{
	border-width : 1px; /*定义边框宽度*/
	border-color: blue;
	padding: 10px; /*定义内边距*/
	margin: 10px; /*定义外边距*/
	border-style: solid; /*定义边框样式，这里是实线边框*/
}
p.p2{
	border-width : 1px;
	padding: 10px;
	margin: 10px;
	border-style: dotted; /*虚线边框*/ 
}
p.p3{
	border-width: 1px;
	padding: 10px;
	margin: 10px;
	border-style: solid dotted solid dotted;/*依次定义上右下左的边框样式*/
} 
</style>
</head>
<body>
	<p class="p1">带实线边框的段落，内边距10px，外边距10px，边框宽度1px</p>
	<p class="p2">带虚线线边框的段落，内边距10px，外边距10px，边框宽度1px</p>
	<p class="p3">定义边框的四条线的样式，内边距10px，外边距10px，边框宽度1px</p>
</body>

效果图如下：

10、margin和padding属性的使用，如下代码：

<!DOCTYPE html>
<head>
<style type="text/css">
div{
	border-width: 1px;
	border-style: solid;
}
p.p1{
	background-color:red;
	margin: 10px;
}
p.p2{
	background-color: pink;
	padding: 10px;
}
</style>
</head>
<body>
	<div>
		<p class="p1">margin的使用，设置了margin为10px后，外边距都是10px，也可以分别使用margin-top、margin-bottom等属性</p>
	</div>
	<br/>
	<div>
		<p class="p2">padding的使用，设置了padding为10px后，内边距都是10px，也可以分别使用padding-top、padding-bottom等属性</p>
	</div>
</body>

效果图如下：

11、分组和嵌套选择器，如下代码：

<!DOCTYPE html>
<head>
<style type="text/css">
h1, p{ /*分组选择器，将h1和p标签使用相同的样式*/
	color : blue;
} 
.div1 span{ /*嵌套选择器，选择了class名为div1的内部span标签*/ 
	color: red;
}
</style> 
</head>
<body>
	<h1>hello</h1>
	<p>hello</p>
	<div class="div1">
		<span>hello world!</span>
		<h2>welcome</h2>
	</div>
</body>

效果图如下：

12、css伪元素，用于添加一些选择器的特殊效果

所有CSS伪类/元素

选择器	示例	示例说明
:link	a:link	选择所有未访问链接
:visited	a:visited	选择所有访问过的链接
:active	a:active	选择正在活动链接
:hover	a:hover	把鼠标放在链接上的状态
:focus	input:focus	选择元素输入后具有焦点
:first-letter	p:first-letter	选择每个<p> 元素的第一个字母
:first-line	p:first-line	选择每个<p> 元素的第一行
:first-child	p:first-child	选择器匹配属于任意元素的第一个子元素的 <]p> 元素
:before	p:before	在每个<p>元素之前插入内容
:after	p:after	在每个<p>元素之后插入内容
:lang(language)	p:lang(it)	为<p>元素的lang属性选择一个开始值

例子：

<!DOCTYPE html>
<style type="text/css">
#p1:first-line{/*first-line用于给p标签中的第一行添加css样式*/ 
	color : red;
	font-size : 18px;
}
#p2:first-letter{
	font-size : 25px;
	font-style : bold;
}
</style>
<div>
	<p id="p1">hello, world!<br/>my name is tom</p>
	
	<p id="p2">Today is my day!</p>
</div>

效果：

下面用伪元素实现一个导航栏，当鼠标移动到导航栏的菜单上时，菜单的背景颜色和字体颜色会发生变化，代码如下：

<!DOCTYPE html>
<style type="text/css">
a{
	width : 100px;
	padding : 10px;
	background-color : #d3d3d3;
	text-align: center;
	text-decoration: none;
	font-family : "楷体"; 
	font-size : 20px;
	color : white;
}
a:hover{
	background-color : #e3e3e3;
	color : blue;
}
</style>
<div>
	<a href="https://www.baidu.com">打开百度</a>
	<a href="http://www.sohu.com">打开搜狐</a>
	<a href="http://www.sina.com">打开新浪</a>
</div>

效果图如下，其中中间一项是当鼠标指示到链接上时的效果：

13、css实现图片廊，代码如下：

<!DOCTYPE html>
<html>
<head>
<style type="text/css">
div.image{
	border-width : 1px;
	border-style : solid;
	width : auto;
	float : left;
	text-align : center;
	padding-top : 10px;
	margin-left : 10px;
}
div.desc{
	width : 150px;	
	margin-top : 10px;
	margin-bottom : 10px;
}
</style>
</head>
<body>
	<div class="image">
		<a href="../test.png"><img src="../test.png" width="100px" height="100px"></a>
		<div class="desc">this is image description</div>
	</div>
	
	<div class="image">
		<a href="../test.png"><img src="../test.png" width="100px" height="100px"></a>
		<div class="desc">this is image description</div>
	</div>
	
	<div class="image">
		<a href="../test.png"><img src="../test.png" width="100px" height="100px"></a>
		<div class="desc">this is image description</div>
	</div>
	
</body>
</html>

效果如下图：

14、css改变图片透明度，如下代码：

<!DOCTYPE html>
<html>
<head>
<style type="text/css">
img{
	opacity : 0.4;
	filter:alpha(opacity=40);/*IE8及更早的浏览器使用该属性设置透明度*/
}
img:hover{
	opacity : 1.0;
	filter:alpha(opacity=100);
}
</style>
</head>
<body>
	<img src="../test.png" width="120px" height="120px">
</body>
</html>

默认时图片透明度为40%，当鼠标移动到图片上时，图片透明度为完全不透明。

15、css属性选择器，如下代码所示：

<!DOCTYPE html>
<html>
<head>
<style type="text/css">
[href]{ /*选择带有href属性的标签*/ 
	color : red;
}
[title~=hello]{ /*选择属性值包含hello的标签*/
	color : red;
}
input[type="text"]{/*选择input标签中，type属性为text的标签*/
	color : blue;
}
</style>
</head>
<body>
	<a href="https://www.baidu.com">baidu</a><br/>
	<a href="http://www.sina.com">sina</a>
	<p title="hello world">hello world</p>
	<p title="welcome">nice to see you</p>
	name : <input type="text" name="name"/>
	password : <input type="password" name="password"/>
</body>
</html>

效果如下图：