css基础

最新推荐文章于 2023-08-18 20:40:23 发布

edong_wj

最新推荐文章于 2023-08-18 20:40:23 发布

阅读量102

点赞数

分类专栏： css 文章标签： CSS MySQL JavaScript ViewUI

css 专栏收录该内容

0 篇文章 0 订阅

订阅专栏

css知识点
一:css样式
1.行内样式:在html标记(<p>)中采用一个style属性,直接添加css样式风格
<body>
<p style="font-family:宋体;color:red;font-size:18px">周杰伦</p>
<p style="font-family:宋体;color:red;font-size:18px">范特西</p>
<p style="font-family:宋体;color:red;font-size:18px">叶惠美</p>
</body>
缺点：如果<p>标记很多..在需要改变css样式的时候,那么每个<p>标记都需要改变,很不方便..，
所以就引入了内嵌式

2.内嵌式:在页面中采用一个style标记,将css部分单独分离出来...
<head>
<style type="text/css">
p{
font-family:黑体;
color:#FF0000;
}
</style>
</head>
<body>
<p>周杰伦</p>
<p>范特西</p>
<p>八度空间</p>
<p>叶惠美</p>
</body>

3.链接式:对于一整个网站来说..每个网页都需要一种统一的样式...那么就需要链接式了。
第一步：
写一个edong.css文件
h2{
font-family:红色;
color:#FF0000;
}
p{
font-family:黑体;
color:#FF0000;
}
第二步:
<head>
<link href="edong.css" type="css/text" rel="stylesheet">
</head>
<body>
<h2>周杰伦</h2>
<h2>范特西</h2>

<p>八度空间</p>
<p>叶惠美</p>
</body>

4.导入样式于链接样式相同
<head>
<style type="text/css">
@import url(edong.css);
</style>
</head>
<body>
<h2>周杰伦</h2>
<h2>范特西</h2>

<p>八度空间</p>
<p>叶惠美</p>
</body>
二:css选择器
1.标记选择器:对页面中所有标记使用同一种css风格
h2{
font-family:红色;
color:#FF0000;
}
2.类别选择器:对特殊的一些标记进行样式控制,运用在不同标记中
规范:.class(.+类别选择器名称,名称随便定义
<style type="text/css">
.first{
font-family:红色;
color:#FF0000;
}
.second{
font-family:蓝色;
color:#FF0000;
}
.third{
font-family:紫色;
color:#FF0000;
}
</style>
<body>
<p class="first">八度空间</p>
<p class="second">叶惠美</p>
<h2 class="third">张柏</h2>
</body>
3.id选择器:用于页面中某一个特殊的标记.
注意：
正确的方式是每一个id选择器只能对应一个标记,因为在用javascript时,
会用到document.getElementById("") 只会找对应的一个id。所以严格规定是一个Id选择器是不能出现在多个标记中
<style type="text/css">
#one{
font-family:红色;
color:#FF0000;
}
#two{
font-family:蓝色;
color:#FF0000;
}
#three{
font-family:紫色;
color:#FF0000;
}
</style>
<body>
<p id="one">八度空间</p>
<p id="two">叶惠美</p>
<h2 id="three">张柏</h2>
</body>
4.集体选择器:将很多不同样式选择器放在一起
<head>
<style type="text/css">
h1,h2,h3,h4{
font-family:红色;
color:#FF0000;
}
h2.special,special,#one{
text-decoration:underline;

}
</style>
</head>
<body>
<h1>八度空间</h1>
<h2 class="special">叶惠美</h2>
<h3>周杰伦</h3>
<h4>范特西</h4>
<p class="special">张柏</p>
<p id="one">qwnbc</p>
</body>
5.选择器嵌套:表示在某个标记里面的子标记的一些样式风格(两个标记之间用空格隔开)
<head>
<style type="text/css">
p b{
font-size:18px;
text-decoration:underline;
color:#FF0000;
}
</style>
</head>
<body>
<p>最近还好吗？<b>不能说的秘密</b>恋人未满..</p>
<b>你要离开我知道很简单..</b>
</body>
6.子选择器:某标记只对其子标记起作用，而孙标记则毫无影响.
<head>
<style type="text/css">
ul.myList>li>a{
font-size:18px;
text-decoration:underline;
color:#FF0000;
}
</style>
</head>
<body>
<ul class="myList">
<li>
<a></a href="http://localhost:3306/user">连接mysql数据库</a>

<ul>
<li><a href="#">链接一</a></li>
<li><a href="#">链接二</a></li>
<li><a href="#">链接三</a></li>
</ul>
</li>
</ul>
</body>

子选择器与嵌套选择器的区别:将上面的样式部分改成嵌套选择器样式,结果就会不同..
用空格取代">"
<head>
<style type="text/css">
ul.myList li a{
font-size:18px;
text-decoration:underline;
color:#FF0000;
}
</style>
</head>
结果不管是子标记还是孙标记都会改变样式