CSS基本样式和元素选择器
1.什么是CSS
CSS:层叠样式表(Cascading Style Sheets,简写CSS),是一种用来为HTML文档添加样式(字体、间距、位置、颜色、角度等显示效果)的计算机语言。简单来说,HTML是内容的展示,而CSS是对内容的修饰。
2.CSS的引用方式
①行内样式:在需要的标签内直接书写< div style=“d代码”> 内容< /div >,它只针对当前标签生效,写重复样式就会很影响效率。所以一般都不推荐使用。
②内部样式:在head标签内新建一个style标签,
<head>
<style>
CSS中的代码注释格式采用的是:/* 注释文字 */
h1{
color="red";
}
/* 但是该样式只能在本文件中使用,不能在其他文件中使用*/
</style>
</head>
③外部样式:新建一个css文件,在css文件书写样式,然后在head标签中新建一个link标签,通过href属性设置外部css文件路径。
<link rel="stylesheet" href="这里书写css文件的路径">
3.元素选择器
标签选择器:
<head>
<style>
/* 标签选择器 h1~h6,div,span,p,ul,ol,a等等*/
h1{
color="blue";
}
</style>
</head>
<body>
<h1>kiva,ixa,oo,delta</h1>
</body>
类选择器:
<head>
<style>
.leaf{
color="red";
}
</style>
</head>
<body>
<h1 calss="leaf">dasfnanflasmflkalagnlag</h1>
</body>
id选择器
<head>
<style>
/*
id选择器和类选择器区别:
① W3C标准规定,在同一个页面内,不允许有相同名字的id对象出现,但是允许相同名字的class。
② 类选择器,好比人的名字,是可以多次重复使用的,比如张伟、王伟、李伟、李娜。
③ id选择器,好比人的身份证号码,全中国是唯一的,不得重复。只能使用一次。
#kiva{
color="green";
}
.class{
color="yellow";
}
</style>
</head>
<body>
<h1 class="leaf" id="kiva">骑士</h1> <!--显示id的样式,id选择器和类选择器就好比名字和身份证号码,一个身份证号码只能对应一个人,一个名字可以多个人相同-->
</body>
多类名选择器
<head>
<style>
.pink {
color: pink;
}
.font20 {
font-size: 20px;
}
.font14 {
font-size: 14px;
}
</style>
</head>
<body>
<div class="pink font20">虞姬</div>
<div class="font20">明世隐</div>
<div class="font14 pink">甄姬</div>
<div class="font14">貂蝉</div>
</body>
4.CSS的基本样式
尺寸样式:width(宽)height(高)
位置样式:水平位置:margin-left,margin-right,垂直位置,margin-top margin-bottom ,它的复合写法:若是四个参数,按照顺时针方向,上右下左, margin: 50px 20px 20px 30px;,两个参数时按照上下,左右,margin: 20px 30px。但是书写时先注意,记得清除默认边距,margin:0,能够减缓浏览器运行压力。
装饰样式:元素颜色,backgrou-color,
颜色的三种写法:
- 直接写颜色的英文单词。
- rgb(0-255,0-255,0-255)
- 十六进制数,,三位或六位。
文字样式:文字大小 font-size,文字字体,font-family,文字颜色 color;
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>css的基本样式</title>
<style>
.box1 {
/* ① 尺寸样式,设置宽高:宽width 高height */
width: 800px;
height: 100px;
/* ② 位置样式 */
/* 水平位置 */
margin-left: 30px;
margin-right: 20px;
/* 垂直位置 */
margin-top: 50px;
margin-bottom: 20px;
/* 复合写法 */
/* 四个参数:上 右 下 左 */
margin: 50px 20px 20px 30px;
/* 两个参数:上下 左右 */
margin: 20px 30px;
/* 一个参数:四个方向距离一致 */
margin: 50px;
/* 清除默认边距 */
margin: 0;
/* ③ 背景颜色 */
/* 颜色值三种写法:
1.颜色的单词;
2.rgb(0-255,0-255,0-255);
3.十六进制数,三位或六位。*/
background-color: yellow;
/* ④ 文字样式 */
/* 文字大小,浏览器默认渲染14px */
font-size: 20px;
/* 文字字体 */
font-family: SimSun;
/* 文字颜色,颜色写法和背景颜色一致 */
color: green;
}
</style>
</head>
<body>
<div class="box1">
有生之年,狭路相逢,终不能幸免,手心忽然长出纠缠的曲线。
</div>
<div class="box2">
懂事之前,情动以后,长不过一天,留不住算不出流年。
</div>
</body>
</html>