层叠样式表（CSS）及常见样式

2018-09-04 本文已影响101人 _宁采臣

1.层叠样式表

层叠样式表：Cascading Style Sheet :CSS
主要用于标签的样式修饰：修饰内容、位置、颜色等等

操作过程中，主要注意如下环节
（1）css的基本语法
（2）css代码的位置
（3）css选择器
（4）常见样式

1.1CSS基本语法

语法：
样式名称：样式的值
如：
color:red 内容中文本的颜色：红色
background-color:orange 某个标签的背景颜色：橙色
font-size:22px 标签中文本字体的大小：22像素
font-family:"宋体" 标签中文本的字体：宋体

1.2CSS代码的位置

在一个标准网页中，CSS代码的位置一般有三个位置
（1）标签style属性中；用于修饰当前标签
<input type="text" style="width:120px;height:30px;"/>
(2) 当前网页中，将样式包含在一对<style></style>标签中【入门推荐】
<style>
/修饰当前网页中所有input标签，宽度120像素，高度30像素/
input{width:120px;height:30px;}
</style>
(3)外部CSS文件中专门用于定义CSS样式，引入到当前网页中使用【正式开发推荐】
index.css 样式表文件
index.html 网页文件
网页文件中，通过<link ref="stylesheet" href="index.css">标签将一个样式表文件引入当前网页中操作
1.标签内嵌样式【不推荐】
2.页面内嵌样式【少量样式使用该方式操作】
3.外部样式【大量样式操作店家推荐】

1.3CSS选择器

选择器：CSS代码中，用于选择/选中标签的语法
修饰标签的样式：首先要选中某个/多个标签
常见CSS选择器：

选择器名称                                  描述
*{样式}                       选中当前网页中所有标签
#id                             id选择器，选中网页中id属性为之定点杆值得某个标签，只能选中一个标签【规范】
。class                     class选择器：选中网页中class属性为指定值的多个标签；任意标签的class可以重复
tag                             标签选择器：使用标签名称，直接选中当前网页中所有的该名称的标签
selector > selector2           子类选择器：字标签选择器 ，选中selector选择器选中的标签中，直接子标签selector选中的标签
selector   selector2               包含选择器，选中selector选中你的标签中，所有的selector2选中的标签
selector：nth-of-type（num）    序号选择器|序列选择器，选中第几个标签

2常见样式

2.1内容修饰样式

（1）——字体样式
<style>
字体 font-family:"楷体。。。。"
颜色 color：颜色代码
字号 font-size：12px
加粗 p{font-weight:bolder;}
斜体 li:nth-of-type(2){font-style:italic;}
</style>

实例如下

image.png

（2）——背景样式
<style>

ch1{width:200px;height:200px;

背景颜色 background-color: 颜色代码
背景图片 background-image:url("图片的相对路径")
背景位置 background-position：宽度，高度；
边框 border:solid 2px red;
圆角边框 border-radius：5px 边框圆化五个像素 border-radius：50%；圆形边框的设置
边框颜色 border：solid 2px 颜色代码
边框粗细 border：solid 你想要的线条粗细px 颜色代码
字体居中： text-align：center；
溢出标签的内容：隐藏 overflow：hidden；
</style>
实际案例:

image.png

2.2定位样式

标签宽度
标签高度

<style>
/*任意标签，包含默认的边距*/
/*这样默认的边距，会影响网页元素的定位，一般都会置空。*/
*{margin：0；
padding：0；
}
</style>

页面窗口中离窗口左边的距离——外边距
页面窗口中离窗口顶部的距离——外边距

margin-left：220px；        #左边距
margin-top：20px；          #上边距

标签内容和标签之间的留白距离——内边距

padding-left：50px；
padding-top：20px；

元素/标签一旦定位：说明元素可以设置宽度和高度，对标签就需要进一步的标签分类：
行标签：标签前后不换行，标签不能设置宽度和高度
行内块标签，标签前后不换行，标签可以设置宽度和高度
块标签：标签前后自动换行，标签可以设置宽度和高度

实际操作过程中，对于标签的控制，通常使用样式进行处理：display<br/>
display:inline;         表示修饰的标签为行标签
diaplay:inline-block;   表示修饰的标签为行内块标签<br/>
display:block;             表示修饰的标签为块标签

标签元素的定位：样
式：position
四种定位方式：
默认：position：static

相对于父元素左上角的坐标进行定位
margin-left:0;
margin-top:0

相对：position：relative

当前元素相对浏览器|父元素定位;所有的子元素相对自己定位
【margin定位】

绝对：position：absolute

默认情况下~父元素左上角显示 left：0；top：0；父元素默认定位，当前元素相对于浏览器进行定位

top：0；
left：0；

固定：position：fixed

  position:fixed;
一种独立的定位方式【top|left定位】  相对于浏览器固定位置
            width:200px;
            height:500px;
            top:200px;
            background-color:darkblue;
            margin-left:1200px;
            color:white;

所谓的定位：就是确定哪里是（0,0）原点
案例