css基础第一节
要给网页做装修了!!!
CSS,是层叠样式表(英文全称:Cascading Style Sheets)是一种用来表现HTML(标准通用标记语言的一个应用)或XML(标准通用标记语言的一个子集)等文件样式的计算机语言。
CSS具有以下特点:
1、丰富的样式定义
CSS提供了丰富的文档样式外观,以及设置文本和背景属性的能力;允许为任何元素创建边框,以及元素边框与其他元素间的距离,以及元素边框与元素内容间的距离;允许随意改变文本的大小写方式、修饰方式以及其他页面效果。
2、易于使用和修改
CSS可以将样式定义在HTML元素的style属性中,也可以将其定义在HTML文档的header部分,也可以将样式声明在一个专门的CSS文件中,以供HTML页面引用。总之,CSS样式表可以将所有的样式声明统一存放,进行统一管理。
3、多页面应用
CSS样式表可以单独存放在一个CSS文件中,这样我们就可以在多个页面中使用同一个CSS样式表。CSS样式表理论上不属于任何页面文件,在任何页面文件中都可以将其引用。这样就可以实现多个页面风格的统一。
4、层叠
层叠就是对一个元素多次设置同一个样式,这将使用最后一次设置的属性值。例如对一个站点中的多个页面使用了同一套CSS样式表,而某些页面中的某些元素想使用其他样式,就可以针对这些样式单独定义一个样式表应用到页面中。
5、页面压缩
在使用HTML定义页面效果的网站中,往往需要大量或重复的表格和font元素形成各种规格的文字样式,这样做的后果就是会产生大量的HTML标签,从而使页面文件的大小增加。
而将样式的声明单独放到CSS样式表中,可以大大的减小页面的体积,这样在加载页面时使用的时间也会大大的减少。另外,CSS样式表的复用更大程序的缩减了页面的体积,减少下载的时间。
接下来是css的一些基础知识:
一、3种引入方式:
1:内联 在标签中引入样式
<标签名 style="样式1:样式值1";样式2:样式值2></标签名>
2:内嵌 在head标签中添加一个style标签
<head>
<style>
选择器{
样式1:样式值1;
样式2:样式值2;
}
</style>
</head>
3:外部引入 将样式放到css文件中,然后用link标签在head标签中引入
<link href="xxx.css">
css引入方式的优先级:内联>内嵌>外部引入
二、 选择器(3种):
1.id选择器:在标签中添加id属性
<标签名 id="id值"></标签名>
注意:id值不能重复
在style标签中
#id值{
样式1:样式值1;
样式2:样式值2;
}
2.class选择器:在标签中添加class属性
<标签名 class="class值"></标签名>
在style标签中
.class值{
样式1:样式值1;
样式2:样式值2;
}
3.元素选择器:
在style标签中
标签名{
样式1:样式值1;
样式2:样式值2;
}
选择器优先级 id>class>元素选择器
三、选择器关系:
1.并列关系:
选择器1,选择器2{
样式1:样式值1;
样式2:样式值2;
}
2.父子关系:
选择器1 选择器2{
样式1:样式值1;
样式2:样式值2;
}
3.兄弟关系:
选择器1+选择器2{
样式1:样式值1;
样式2:样式值2;
}
四、字体样式:
font-family:微软雅黑, Arial,Times New Roman;(字体类型,微软雅黑, 一般不设置,使用默认类型)
font-size:30px;(字体大小,使用像素控制字体大小)
font-weight:bold加粗;lighter加细;(字体粗细,一般常用bold和lighter,也可使用数字控制)
font-style:italic斜体;(字体斜体)
color:red颜色(颜色)
五、文本样式:
text-decoration:line-through 删除线
underline 下划线
overline 顶划线
none 去除所有线(可以用来去除a标签链接的自带下划线)
text-transform:none 默认值,无转换发生
uppercase 转换成大写
lowercase 转换成小写
capitalize 将每个英文单词的首字母转换成大写,其余无转换发生(空格隔开为一个英文单词)
text-indent:2em;2em代表缩进2个字符 px代表缩进多少像素,需要自己测量
text-align:center;left;right;文本水平居中,左对齐,右对齐
line-height:30px;行高,自己设置
六、边框样式:
border-width:10px;边框的宽度
border-style:none;无样式
solid;实线
dashed;虚线
dotted;点线
double;双线,双线的宽度等于border-width的值
border-color:red;定义边框的颜色
边框样式需要三个属性同时存在,简介的写法是:border:1px solid red;
局部边框样式:border-top:;边框上面的线的样式
border-bottom边框下面的线的样式
border-left 边框左边的线的样式
border-right 边框右边的线的样式
ps.感觉编程代码是非常非常灵活的,每一个标签都有非常多的作用,这就要求我们在敲代码的时候要想好每个标签的具体作用,以最简洁最清晰的方式完成最多的需求!加油,越努力,越幸运!
posted on 2020-01-03 16:31 煎饼果子不要果子谢谢 阅读(129) 评论(0) 编辑 收藏 举报