CSS
CSS基本用法
1.css的定义
选择器{属性:值;属性:值;属性:值;属性:值;}
-
选择器是将样式和页面元素关联起来的名称
-
属性是希望设置的样式属性,每一个属性有一个或多个值
/* 样式中注释的写法,单行或者多行注释 */
div{
width:100px;
height:100px;
background:gold;
}
2.css盒子模型
将元素叫做盒子,设置对应的样式分别为:盒子的宽度(width)、盒子的高度(height)、盒子的边框(border)、盒子的内边距(padding)、盒子的外边距(margin)
设置宽高
width:200px; /* 设置盒子的宽度,此宽度是指盒子内容的宽度,不是盒子整体宽度(难点) */
height:200px; /* 设置盒子的高度,此高度是指盒子内容的高度,不是盒子整体高度(难点) */
设置内边距
padding后面还可以跟3个值,2个值和一个值,分别设置如下:
padding:20px 40px 50px; /* 设置顶部内边距为20px,左右内边距为40px,底部内边距为50px */
padding:20px 40px; /* 设置上下内边距为20px,左右内边距为40px*/
padding:20px; /* 设置四边内边距为20px */
盒子的真实尺寸
盒子的width和height值固定时,如果盒子增加border和padding,盒子整体的尺寸会变大,所以盒子的真实尺寸为:
- 盒子宽度=width+padding左右+border左右
- 盒子高度=height+padding上下+border上下
块元素居中技巧
使用margin值中的“auto”关键字,“auto”只适用于左右居中,不可用于上下
.box{
width:300px;
height:300px;
background:gold;
margin:0px auto;
}
3.css文本属性
- color 设置文字颜色
- font-size 设置文字大小
- font-family 设置文字字体
- font-weight 设置文字是否加粗
- line-height 设置文字的行高,如:line-height:24px;表示文字高度叫文字上下间距是24px,一行的高度就是24px
- text-decoration 设置文字的下划线
- text-align 设置文字水平对齐的方式
- text-indent 设置文字首行缩进
4.css载入方式
css样式的引入有三种:
-
行间的样式:通过标签的style属性,在标签上直接写样式(直接修改行间style属性,级别最高)
<div style="width:100px; height:100px; background:red ">......</div>
-
内嵌式:通过style标签,在网页上创建潜入的样式表
<style type="text/css"> div{ width:100px; height:100px; background:red } ...... </style>
-
外联式:通过link标签,链接外部样式文件到页面
<link rel="stylesheet" type="text/css" href="css/main.css">
CSS进阶用法
1.列表标签
快速创建列表:
ul>li*4
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
ul>(li>a)*4
<ul>
<li><a href=""></a></li>
<li><a href=""></a></li>
<li><a href=""></a></li>
<li><a href=""></a></li>
</ul>
列表相关样式
list-style 去掉列表想的小圆点:list-style :none
2.html表单
表单用于搜集不同类型的用户输入,表单由不同类型的标签组成,相关标签及属性用法如下:
-
<form>
标签 定义整体的表单区域-
action属性 定义表单数据提交地址
-
method属性 定义表单提交方式 get/post
-
-
<label>
标签 为表单元素定义文字标注 -
<input>
标签 定义通用的表单元素-
type属性
- type=“text” 定义单行文本输入框
- type=“password” 定义密码输入框
- type=“radio” 定义单选框
- type=“checkbox” 定义复选框
- type=“file” 定义上传文件
- type=“submit” 定义提交按钮
- type=“reset” 定义重置按钮
- type=“button” 定义一个普通按钮
-
value属性 定义表单元素的值
-
name属性 定义表单元素的名称,此名称是提交数据的键名
-
-
<textarea>
标签 定义多行文本输入框 -
<select>
标签 定义下拉表单元素 -
<option>
标签与<select>
标签配合,定义下拉表单元素中的选项
注册表单实例
<form action="#" method="#">
<h3>注册表单</h3>
<p>
<label>姓名</label>
<input type="text" name="username">
</p>
<p>
<label>密码</label>
<input type="password" name="password">
</p>
<p>
<label>性别</label>
<input type="radio" name="gender" value="0"> 男
<input type="radio" name="gender" value="1"> 女
</p>
<p>
<label>爱好</label>
<input type="checkbox" name="like" value="running"> 跑步
<input type="checkbox" name="like" value="reading"> 阅读
<input type="checkbox" name="like" value="guitar"> 吉他
<input type="checkbox" name="like" value="basketball"> 篮球
</p>
<p>
<label>头像</label>
<input type="file" name=person_pic>
</p>
<p>
<label>籍贯</label>
<select name="site">
<option value="1">北京</option>
<option value="2">上海</option>
<option value="3">广州</option>
<option value="4">深圳</option>
</select>
</p>
<p>
<label>简介</label>
<textarea name="about"></textarea>
</p>
<p>
<input type="reset" value="重置">
<input type="submit" value="提交">
</p>
</form>
表单常用样式、属性及实例
- outline 设置input框获得焦点时,是否显示凸显的框线,一般设置为没有:outline:none;
- placeholder 设置input输入框默认提示文字
3.表格
<table>
标签 声明一个表格<tr>
定义行<td>
和<th>
标签:定义一行中的一个单元格,td代表普通单元格,th表示表头单元格
表格样式相关属性
border-collapse 设置表格的边线合并 :border-collapse :collapse
#tr>th*4
<tr>
<th>name</th>
<th>age</th>
<th>address</th>
<th>score</th>
</tr>
#(tr>td*4)*4
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
4.css显示特性
display属性是用来设置元素的类型及隐藏,常用属性有:
-
none 元素隐藏且不占位置
-
inline 元素以行内元素显示
-
block 元素以快元素显示
5.css元素溢出
当子元素尺寸超过父元素的尺寸时,需要通过overflow属性设置父元素显示溢出的子元素
设置项:
- visible 默认值,内容不会被剪裁,会显示在父元素框之外
- hidden 内容会被剪裁,并且其余内容是不可见的
- scroll 内容会被修剪,但是浏览器会显示滚动条以便查看其余的内容
- auto 如果内容被修剪,浏览器会显示滚动条以便查看其余的内容
css高级进阶
1.定位
文档流
元素按照html中标签编写的顺序一次从上到下,从左到右排列,块元素独占行元素共享一行
关于定位
可以使用css的position属性设置对元素的定位,设置选项如下:
-
relative 生成相对定位元素,一般将父级元素设置为相对定位,子元素设置为绝对定位,子级参照父级元素进行定位,否则参照body来定位
-
absolute 生成绝对定位元素,元素脱离文档流,不占据文档流的位置,可以理解漂浮在文档流之上,相对于上一个设定了定位的父级元素进行定位,找不到参照body
-
fixed 生成固定定位元素,元素脱离文档流,不占据文档流的位置,可以理解漂浮在文档流之上,相对浏览器窗口定位
定位元素层级
定位元素是漂浮在文档流之上的,可以通过设置z-index设置元素的层级
.box01{
......
position:absolute; /* 设置了绝对定位 */
left:200px; /* 相对于参照元素左边向右偏移200px */
top:100px; /* 相对于参照元素顶部向下偏移100px */
z-index:10 /* 将元素层级设置为10 */
}
设置漂浮子元素透明度
/* 设置元素透明度,将元素透明度设置为0.3*/
opacity:0.3;
2.权重
CSS权重指的是样式的优先级,有两条或多条样式作用于一个元素,权重高的那条样式对元素起作用,权重相同的,后写的样式会覆盖前面写的样式
权重的等级
内联样式,如style=“”,权重1000
ID选择器,如#content,权重1000
类、伪类,如:.content、:hover权重值为10
标签选择器,如div 、p标签权重值1
例1:
<style type="text/css">
div{
color:red;
}
</style>
......
<div style="color:blue">这是一个div元素</div>
<!--
两条样式同时作用一个div,上面的样式权重值为1,下面的行间样式的权重值为1000,
所以文字的最终颜色为blue
-->
例2:
<style type="text/css">
body #content .main_content h2{
color:red;
}
#content .main_content h2{
color:blue;
}
</style>
......
<div id="content">
<div class="main_content">
<h2>这是一个h2标题</h2>
</div>
</div>
<!--
第一条样式的权重计算: 1+100+10+1,结果为112;
第二条样式的权重计算: 100+10+1,结果为111;
h2标题的最终颜色为red
-->
前端页面流程顺序
-
创建项目目录
一般先创建一个总目录,然后在此目录创建images、css、js三个目录,三个目录分别存放图片、css文件以及js文件
-
切图
通过Photoshop对网页效果图进行切图,所使用图片需要是带图层的psd格式
-
新建html文件,新建css文件
-
参考效果图,编写html和css代码