css基本学习

最新推荐文章于 2024-06-06 21:06:58 发布

strong_yu

最新推荐文章于 2024-06-06 21:06:58 发布

阅读量554

点赞数

分类专栏： html+css+js

本文链接：https://blog.csdn.net/strong_yu/article/details/51869433

版权

html+css+js 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

一.css的概念及其作用

1.css的概念

层叠样式表，该样式定义如何显示html中的元素

2.css的作用

a.修饰html元素，使得html更加好看

b.修饰与内容分离，提高了效率

c.提高了代码的复用性

二.css的书写规范与html怎么引入css

1.内联样式

当特殊的样式应用到个别的元素时，可以使用内联样式，该样式把style属性内嵌到html标签中。

<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<p style="color:red; font-size:100px">hello world</p>
</body>
</html>

语法规则:

a.style属性内嵌到html标签中

b.style中属性的写法:属性:属性值

c.多个样式之间使用分号隔开

2.内部样式

当单个标签要使用某种样式时，可以使用内部样式,在head标签中使用css标签引入

<pre name="code" class="html"><html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style type="text/css">
p{
color:red; 
font-size:100px
}
</style>
</head>
<body>
<p >hello world</p>
</body>
</html>

语法规则；

a.在head标签中使用引入css标签

b.要使用样式的标签{属性:属性值。。。。}

c.属性之间有分号隔开

3.外部样式

当很多页面都要引用该样式时，就可以把它写成一个css文件，供html文件引用

html文件

<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<link rel="stylesheet"   type="text/css" href="psheet.css"/>
</head>
<body>
<p >hello world</p>
</body>
</html>

css文件

@CHARSET "UTF-8";
p{
	color:red;
	font-size:100px;
}

语法规则；

a.把样式写成css文件

b.使用link标签引入css文件

c.属性的写法：属性：属性值
d.多个属性之间使用分号;隔开

4.@import方式

<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style type="text/css">
@import url("psheet.css");
</style>
</head>
<body>
<p >hello world</p>
</body>
</html>

从上面可以看出,@import方式是内部样式和外部样式的结合，link和import都可以把css文件引入到html文件中

link与@import方式的区别：
                a.link所有浏览器都支持 import部分低版本IE不支持
                bimport方式是等待html加载完毕之后在加载
               (cimport方式不支持js的动态修改

优先级:

内联样式表>内部样式表>外部样式表

三.css的选择器

1.基本选择器

a.元素选择器

语法规则:

html标签{css属性}

p{
	color:red;
	font-size:100px;
}

b.id选择器

语法规则:id的唯一性

#id名{css选择器}

<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style type="text/css">
<!-- id选择器的定义-->
#p1{
color:red;
	font-size:100px;
}
</style>
</head>
<body>
<p id="p1">hello world</p>
</body>
</html>

id必须是唯一的，web标准规定不允许两个相同标签的id是相同的,并且id是javascript获取对象的一个标识，所以必须是惟一的

c.类选择器.

语法规则:class的值{css属性}

<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style type="text/css">
.p1{
color:red;
font-size:100px;
}
</style>
</head>
<body>
<p class="p1">hello            world</p>
<p class="p1">hello            world</p>
</body>
</html>

类选择器可以组合使用

优先级:id>class>元素选择器

2.属性选择器

语法规则:基本选择器[属性=”属性值“]{css属性}

<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style type="text/css">
input[type="text"]{background-color:red;}
input[type="password"]{background-color:pink;}
</style>
</head>
<body>
<form>
账号<input type="text"/><br/>
密码<input type="password"/><br/>
</form>
</body>
</html>

3.伪元素选择器

主要用于向某些选择器设置特殊效果

例a标签的伪元素选择器

语法规则：
               静止状态   a:link{css属性}
               悬浮状态   a:hover{css属性}
               触发状态   a:active{css属性}
               完成状态   a:visited{css属性}

<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style type="text/css">
a:link{color:red}
a:hover{color:yellow}
a:active{color:pink}
a:visited{color:green}
</style>
</head>
<body>
<a href="#">伪元素选择器</a>
</body>
</html>

4.层级选择器

如果有有两个分层的区域使用的最外层选择器不同，内层选择器相同,但是想使这两个区域最内层的部分仍有差别,那么使用层级选择器可以精确的表示。

语法规则:

父类选择器子类选择器。。。。{css 属性}

<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style type="text/css">
#d1 .c2 td{color:red}
</style>
</head>
<body>
<table id="d1" border="1">
<tr class="c1">
<td>第一个表格一行第一列</td>
</tr>
<tr class="c2">
<td>第一个表格二行第一列</td>
</tr>
</table>

<table id="d2" border="1">
<tr class="c1">
<td>第二个表格一行第一列</td>
</tr>
<tr class="c2">
<td>第二个表格二行第一列</td>
</tr>
</table>
</body>
</html>