我们知道网页开发,无非就是h5页面+css+js,前面写了一篇文章总结了js,这里再来总结下css,算是为自己目前的网页开发知识做一个系统性的总结。
我们知道h5标签是一些可显示的控件,这些控件显示在什么位置,怎么显示则是通过css来进行控制,至于页面布局首先是放在什么位置的问题,这里就先来看看页面布局的问题。
页面布局涉及到的知识点比较多,比如盒子模型、position、display等
1.1 盒子模型
盒子模型是用来理解padding、margin以及border这几个元素概念的模型,一个盒子模型就是一个标签所占页面的大小以及和其它标签之间的相对位置。
最中心的是标签content,比如
<div>hello worlddiv>
这个代码中的hello world字符就是div标签的content,而这个内容就是盒子模型中最中心得蓝色部分所占的位置,其外围的绿色部分表示content和border之间的距离(这个距离就叫做padding),这个里有四个方向上的距离,分别是左上右下四个方向,即padding-left、padding-top、padding-right、padding-bottom。
border区域代表了标签的边框,当然是边框就有样式(实线、双线、虚线等)、宽度、颜色、圆角等属性可以设置。
margin代表着标签和其它的标签之间的相对距离,自然也有左上右下几个方向的距离可以设置。
1.2 定位机制
css的定位机制包括三种类型,即普通流、浮动和定位。
什么叫做普通流呢,普通流就是一种常规的从上到下从左到右的一种定排版规则。
而浮动就是指使用float(float:left/right/none)属性来使标签处于一种漂浮排版的状态。与浮动相关的属性出了float还有clear,clear属性表示对应元素除去浮动的特性。
定位用的就比较多了,定位使用position关键字来表示,一般会结合left、top、right、bottom、zindex这些属性来一起使用。
position值 | 描述 |
---|---|
static | 默认值标签遵循正常的文档流 |
relative | 相对定位元素,相对于其正常位置进行定位,遵从正常的文档流 |
absolute | 绝对元素定位脱离正常的文档流 |
fixed | 局对元素定位,固定在浏览器某处 |
如上面所说的position常常结合left、top等属性来一起使用
h2{
position:absolute;
left:100px;
top:150px
}
以上代码表示h2标签绝对定位,并且处于距离页面左侧 100px,距离页面顶部 150px的位置。
1.3、块级元素和内联元素
css中存在快级元素和内联元素的概念,什么是块级元素呢,简单的说独占一行的元素就叫做块级元素。什么叫内联元素呢,内联元素就是不能独占一行的元素。当然这种区分方式够粗暴的,css中通过display这个属性来设置一个标签到底是内联还是块级元素(每个标签都有自己的默认内联或者块级元素类型,display属性点额作用是去改变对应标签的内联块级属性)。
display属性值 | 说明 |
---|---|
block | 表示块级元素,标签独占一行,并且可以设置自己的width、height属性、margin和padding属性也可正常设置。 |
inline | 不会独占一行,相邻内联元素排在同一行,知道排不下才换行,其宽度和高度随内容变化,也即是width、height属性设置无效,margin和padding左右方向设置有效,竖直方向设置无效。 |
inline-block | 将对象呈现为内联对象,也就是不会独占一行,但是width、height、margin、padding可以正常设置。 |
到这里页面布局这一块介绍了盒子模型、定位机制、内联及块级元素三个知识点,通过这三个知识点,我们知道怎么去设置一个元素在页面中的位置,那么肯定有同学会说,这个设置的属性我是知道了,那么我怎么去选择设置的标签呢,这就设计到选择择器的知识了。
我们用css进行样式设置,首先要做的是指定需要设置样式的标签,一般有三种方式可以用来指定标签,即标签选择器、类选择器和id选择器。
2.1、标签选择器
标签选择器直接指定css样式所适用的标签
div {
position:absolute;
left: 100px;
top: 150px;
}
2.2、类选择器
类选择器通过加.classname方式来声明类样式,然后在标签中通过class属性来使用对应的类样式。
.basic-style{
width: 100px;
height: 100px;
color: #000;
}
这里声明了一个叫做basic-style的类样式,可以在h5代码中通过
<div class="basic-style">hello yorykydiv>
赋值class属性的方式对标签样式进行设置。
2.3、id选择器
id选择器通过#idname的方式来声明样式
#basic-div{
width: 100px;
height: 100px;
color: #000;
}
在h5中通过标签的id号,来判断样式是否适用该标签
<div id="basic-div">hello yorykydiv>
类样式和id样式的区别在于,一个类样式可以通过class作用于很多标签,而id样式则由于h5页中id号的唯一性问题,一个id样式只能用于一个标签,同时,一个标签的class属性中可以添加多个类样式。
当然选择则还有很多中,包括属性选择器、父子选择器等等,这里就不一一来说,有一种比较特别的选择器叫做伪类选择器,由于其有动画效果,故将其放在css动画这一小节来进行讲解。
利用css实现动画效果的方式主要有三种,及上一小节最后提到的伪类选择器、transform属性以及transition属性。
3.1、伪类选择器
伪类选择器通过 标签:状态 的方式来实现,比如 a:hover的方式表示鼠标在a标签上面悬停的情况下的样式,这中间切换状态时会有一个样式的切换,所以会出现一个动画效果。
常用的状态有
状态名 | 说明 |
---|---|
hover | 表示鼠标悬停在标签上的状态,可用于所有的标签 |
link | 表示链接未访问的状态,用于a标签,即a:link这么用 |
active | 表示在链接上点下鼠标的状态,用于a标签,a:active这么用 |
visited | 表示链接已经被访问的状态,用于a标签,a:visited这么用 |
before | 表示标签内容之前添加内容的状态,用于p标签,p:before这么用 |
after | 表示在标签内容之后添加内容状态,用于p标签,p:after这么用 |
p:before{
content:"台词:";
}
这里设置了一个p:before的伪类选择器,在h5中添加p标签的使用
//这个p标签将显示“台词:我是唐老鸭。”
<p>我是唐老鸭。p>
3.2、transform属性使用
transform属性用来设置标签的转换和变形,其可以对应着一些关键字来对变形的方式进行设置
关键字 | 说明 |
---|---|
origin | 定义旋转基点(left top center right bottom 坐标值) |
rotate | 定义标签的旋转角度 |
skew | 定义标签的扭曲 |
scale | 定义标签的缩放,包括横向缩放和纵向缩放 |
translate | 定义标签的移动方式,包括了水平和竖直方向的移动 |
可以通过下面的代码来测试transform的不同关键字作用在div标签上的效果。
div {
border: 1px solid black;
height: 30px;
width: 30px;
background-color: yellow;
/*transform-origin: 50px 50px;*/
transform-origin: left;
transform: rotate(50deg);
/*transform: skew(50deg,50deg);*/
/*transform: translate(50px,50px);*/
/*transform: scale(2);*/
}
3.3、transition属性使用
transition这个属性是用来表示平滑过渡的,这里的平滑过渡不单单想tranform那样只是作用在标签的几何形状上,这里的平滑过渡还包括了颜色、长宽、透明度、阴影等等其它属性的平滑过渡。
下面展示一段css代码看看如何使用transition这个属性
div
{
width:100px;
height:100px;
background:blue;
transition:width 2s;
}
div:hover
{
width:300px;
}
这个端css代码作用于div标签,其中的transition:width属性表示将对div标签的宽度进行平滑过渡,过渡的时间是两秒钟,过渡动画由鼠标悬停开始,最后div标签会在两秒内宽度平滑的变为300px。
css中还有很多其它属性比较常用,这里直接逐个进行简单介绍吧。
4.1、颜色属性
color
transparent
opacity
4.2、 字体属性
font-style: 用于规定斜体文本
font-weight:设置字体的粗细
font-size: 设置字体的大小
font-family:字体名称
font:简写属性
4.3、文本属性
white-space: 设置元素中空白的处理方式
direction: 规定文本的方向
text-align: 文本的水平对齐方式
line-height: 文本行高
vertical-align: 文本所在行高的垂直对齐方式
text-indent: 文本缩进
letter-spacing: 添加字母之间的空白
word-spacing: 添加每个单词之间的空白
text-transform: 属性控制文本的大小写
text-overflow: 文本溢出样式
text-decoration: 文本的装饰
text-shadow:文本阴影
word-wrap:自动换行
4.4、背景属性
background-color: 背景颜色
background-image 设置图像为背景
background-position 设置背景图像的位置坐标
background-repeat 设置背景图像不重复平铺
background-attachment 背景图像是否固定或者随着页面的其余部分滚动
background 简写
4.5、列表属性
list-style-type: 列表项标志的类型
list-style-image:将图象设置为列表项标志
list-style-position:列表项标志的位置
4.6、边框属性
border-style:边框样式
border-color:边框颜色
border-width:边框宽度
border-radius:圆角
border: 简写
box-shadow:边框阴影
4.7、图像裁剪
rect 剪裁定位元素:
4.8、overflow属性
overflow属性用来设置当对象的内容超过其指定高度及宽度时如何显示内容
对属性的介绍就到这里,当然很多属性怎么使用都是要靠自己去实践的,同时这所列举出来也并非所有css中的属性,以后有机会便可更多的在本文中进行完善。
1、CSS总结
2、block,inline和inline-block概念和区别
3、CSS文档流