Web-CSS基础
一、CSS概述
1. 概念： CSS (Cascading Style Sheets) 通常称为CSS样式或专业术语层叠样式表；
层叠：使用不同的添加方式，给一个HTML标签添加样式，最后所有的样式叠加到一起，共同作用于该标签；
样式：给HTML标签添加需要显示的效果；
2. 作用： 渲染HTML页面更好看（文本内容、图片外形、版面布局等）
3. CSS的代码规则：
选择器{
属性名:属性值;
属性名:属性值;
…
}
或
选择器{属性名:属性值; 属性名:属性值;…}
4. 注意：
- 选择器 严格区分大小写，属性和属性值不区分大小写；
- 多个属性之间用分号;隔开，最后一个属性结尾分号可以省略；
- 如果某个属性（border属性除外）的值由多个单词组成并且之间包含空格，则必须将这个属性值用引号" "包含；
- 属性的值和单位之间不允许出现空格，否则解析错误；
二、CSS具体用法
1. 在HTML中引入CSS样式的三种方式：
- 行内样式：在标签的style属性值中写CSS代码（只对该标签有效），此时选择器和大括号不用写，只需要 属性名:属性值;属性名:属性值
- 内部样式: 在head标签的子标签< style >中写, 注意不能省略选择器和大括号；
- 外部样式: 在另外一个文件中写，这文件他的后缀必须是.css ，不能省略选择器和大括号；再通过head标签的另外一个子标签 < link >标签引入刚刚写的xxx.css
CSS
测试行内样式
测试内部样式
测试外部样式
2. CSS的三种选择器（selector）：
选择器作用就是选中某个或者某些标签，以便于我们给这些标签设置属性；
- 元素选择器 / 标签选择器
格式：标签名{属性名:属性值;} - id选择器
格式：#id值{属性名:属性值;} - class选择器
格式：.类名{属性名:属性值;} - class选择器精确选择
格式：标签名.类名{属性名:属性值;} - 属性选择器
格式：选择器[属性名=属性值]{属性名:属性值;} - 包含选择器/后代选择器
格式：选择器1 选择器2{属性名:属性值;}
选择器
测试标签选择器
测试id选择器
测试class选择器
测试class选择器
测试包含选择器
测试包含选择器
3. 简单属性（不完整，仅做简单介绍）
1）border边框
border-style 边框风格
border-color 边框颜色
border-width 边框宽度
border 都放在一起
border-top 只有一个方向有边框
border-top，border-left 有交界的边都有边框
2）width宽度
属性：width
值：可以是百分比或者像素
3）height高度
属性：width
值：可以是百分比或者像素
4）background背景样式
background-color背景颜色
background-image:url(imagepath); 图片做背景
url(background.jpg) 本地测试
background-repeat 背景重复
background-size: contain 背景平铺
5）文本样式
color 文字颜色
text-align 对齐
text-decoration 文本修饰
line-height 行间距
letter-spacing 字符间距
word-spacing 单词间距
text-indent 首行缩进
text-transform 大小写
white-space 空白格
6）font字体样式
font-size 尺寸
font-style 风格
font-weight 粗细
font-family 字库
font 声明在一起
7）cursor光标样式
cursor:default 默认箭头
cursor:auto 自动
cursor:crosshair 十字
cursor:pointer 小手
8）padding内边距样式
概念：元素内边距指的是元素里的内容与边框之间的距离 ；
padding-left: 左内边距
padding-right: 右内边距
padding-top: 上内边距
padding-bottom: 下内边距
padding: 上 右 下 左
9）margin外边距样式
概念：元素外边距指的是元素边框和元素边框之间的距离；
margin-left: 左外边距
margin-right: 右外边距
margin-top: 上外边距
margin-bottom: 下外边距
10）display转换
作用： 把一个块级元素转成行内元素（内联元素：不换行，但是不能指定大小），常见的块级元素（能指定大小，但是会换行）有div h1 p 等，常见的内联元素有 a b strong i input 等；
值：block(转成块级元素) inline(转成行内元素) none(隐藏) inline-block（元素处于同一行，同时还能指定大小）
11）超链接样式
超链状态有4种 ：
link - 初始状态，从未被访问过
visited - 已访问过
hover - 鼠标悬停于超链的上方
active - 鼠标左键点击下去，但是尚未弹起的时候
12）隐藏样式
使用display:none; 隐藏一个元素，这个元素将不再占有原空间 “坑” 让出来了
使用 visibility:hidden;隐藏一个元素，这个元素继续占有原空间，只是“看不见”
4. 盒子模型或边框模型（浏览器F12查看）
盒子模型
hello
world
5. 布局属性
1）float浮动
作用：设置元素的浮动效果，让元素浮起来；
值：left 漂起来向左 right 漂起来向右
2）clear
作用：清除元素两边的浮动效果；
值：both 清楚该元素左右两边的浮动效果
3）绝对定位
作用：设置了绝对定位的元素，相当于该元素被从原文档中删除了，原位置不会留下空档
属性：position
值： absolute
再通过指定left，top绝对定位一个元素；
绝对定位是基于最近的一个定位了的父容器；
4）相对定位
作用：相对定位不会把该元素从原文档删除掉，而是在原文档的位置的基础上，移动一定的距离，原位置会产生空档；
属性：position
值：relative
5）水平居中
元素内容居中：
- 属性align=“center”
- 属性style=“text-align:center”
元素居中：
- span内联元素不能通过margin:0 auto居中，可以通过放置在div中，然后让div的text-align实现居中；
- div等块级元素可以设置宽度，然后再使用样式 margin: 0 auto来使得元素居中；
6）垂直居中
- line-height ：设置行间距，适合单独一行垂直居中；
- 内边距：设置相同的上下内边距，实现垂直居中效果，可以用在多行文本上；
- display: table-cell：首先通过display:
table-cell;把div用单元格的形式显示，然后借用单元格的垂直居中vertical-align: middle; 来达到效果；
6. 注册界面的简单设计（HTML+CSS）
HTML：
注册
欢迎注册
CSS：
/*覆盖浏览器默认样式，去除user agent stylesheet 的影响*/
html{color:#000;background:#FFF;}
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,
fieldset,input,textarea,p,blockquote,th,td {
margin:0;
padding:0;
}
table{
border-collapse:collapse;
border-spacing:0;
}
fieldset,img {
border:0;
}
address,caption,cite,code,dfn,em,strong,th,var {
font-style:normal;
font-weight:normal;
}
ol,ul {
list-style:none;
}
caption,th {
text-align:left;
}
h1,h2,h3,h4,h5,h6 {
font-size:100%;
font-weight:normal;
}
q:before,q:after {
content:'';
}
abbr,acronym { border:0;
}
@charset "utf-8";
*{
margin: 0px;
padding: 0px;
}
a{
text-decoration: none;
color: #000000;
font-size:15px;
/*字体*/
}
li{
list-style: none;
}
input,img{
border: none;
}
/*正式内容*/
.container{
margin-left: 600px;
margin-top: 200px;
/*border: 1px solid red;*/
width: 800px;
height: 500px;
}
.header{
font-size: 18px;
color: #2965b1;
text-align: center;;
/*border: 1px solid blue;*/
}
.form-item .form-label{
font-size: 18px;
color: #333;
float: left;
margin-left: 10px;
margin-top: 15px;
/* border: 1px solid orange;*/
width: 200px;
height: 36px;
text-align: right;
}
.form-item .form-field .form-text,.form-item .form-field .form-password{
font-size: 14px;
color: grey;
float: left;
margin-left: 10px;
margin-top: 15px;
border: 1px solid #dedede;
border-radius: 5px;
padding: 3px 10px;
width: 250px;
height: 28px;
}
.form-item .form-field .username-tips,.form-item .form-field .password-tips,.form-item .form-field .phoneNumber-tips{
font-size: 10px;
color: darkgray;
float: left;
margin-left: 10px;
margin-top: 15px;
/*border: 1px solid blue;*/
padding: 8px 10px;
}
.form-item .form-field .form-areaCode{
font-size: 16px;
color: black;
float: left;
margin-left: 10px;
margin-top: 15px;
border: 1px solid #dedede;
border-top-left-radius: 5px;
border-bottom-left-radius: 5px;
padding: 3px 10px;
width: 80px;
height: 36px;
}
.form-item .form-field .form-number{
font-size: 14px;
color: grey;
float: left;
margin-top: 15px;
border: 1px solid #dedede;
border-top-right-radius: 5px;
border-bottom-right-radius: 5px;
padding: 3px 10px;
width: 170px;
height: 28px;
}
.form-item .form-field .form-vertificationCode{
font-size: 14px;
color: grey;
float: left;
margin-left: 10px;
margin-top: 15px;
border: 1px solid #dedede;
border-top-left-radius: 5px;
border-bottom-left-radius: 5px;
padding: 3px 10px;
width: 100px;
height: 28px;
}
.form-item .form-field .form-getCode{
font-size: 14px;
color: white;
background-color: #91C135;
float: left;
margin-top: 15px;
border-top-right-radius: 5px;
border-bottom-right-radius: 5px;
width: 150px;
height: 36px;
}
.form-note{
font-size: 12px;
color: grey;
text-align: center;
/*border: 1px solid orange;*/
margin-top: 15px;
}
.form-item .form-checkbox{
margin-top: 35px;
margin-left: 250px;
width: 12px;
height: 12px;
}
.form-item .form-agreeDoc,.form-item a{
font-size: 12px;
color: black;
padding-top: -5px;
}
.form-item .form-submit{
font-size: 18px;
color: white;
background-color: #4ba0d7;
margin-left: 260px;
margin-top: 15px;
border-radius: 3px;
border: 0 none;
width: 250px;
height: 40px;
}
.footer .link,.footer a{
font-size: 12px;
color: grey;
text-align: center;
margin-top: 50px;
}
.footer .bottom{
font-size: 12px;
color: grey;
text-align: center;
}