本文共 8019 字，大约阅读时间需要 26 分钟。

JavaWeb学习——CSS属性学习

一、基本属性

1.字体样式

• font-family： 设置字体类型
• font-size： 设置字体大小
• font-style：设置字体风格
• font-weight：设置字体的粗细
• font：在一个声明中设置所有字体 属性

如下：

世界这么大，我想去看看

#a{            font-family:幼圆;            font-size:20px;            font-style: oblique;            font-weight:500;        }

效果展示：

2.文本样式

• color：设置文本颜色
• text-align：设置元素水平对齐方式
• text-indent：设置首行文本的缩进
• line-height: 设置文本的行高
• text-decoration：设置文本的装饰
• vertical-align：设置文本对齐

如下：

世界这么大，我想去看看
 学好数理化，走遍天下都不怕

.class1{           color:pink;           text-align:center;           text-indent:2em;           line-height:30px;           text-decoration:underline;           vertical-align:middle;        }

效果展示：

3.文本阴影

• text-shadow：设置文本阴影

1. color：阴影颜色
2. x-offset：X轴位移，用来指定阴影水平位移量
3. y-offset：Y轴位移，用来指定阴影垂直位移量
4. blur-radius：阴影模糊半径，代表阴影向外模糊的模糊范围

如下：

我和你，一起学CSS

span{            font-size: 20px;            text-shadow:black 10px 10px 5px;        }

效果展示：

4.超链接伪类

• a:link 未单击访问时超链接样式
• a:visited 单击访问后超链接样式
• a:hover 鼠标悬浮其上的超链接样式
• a:active 鼠标单击未释放的超链接样式

点我跳转百度

/*没有点击的链接*/        a:link{            color:gray;        }        /*访问后的链接*/        a:visited{            color: red;;        }        /*鼠标放上去的样式*/        a:hover{            color:green;        }        /*鼠标单击但未释放的链接*/        a:active{            color:blue;        }

5.列表样式

• list-style-type：列表小点的样式
• list-style：列表样式设置

   
        
    
JAVA
        
    
PHP
        
    
Python
        
    
C#
        
    
C++
    
   

ul{            list-style-type: circle;        }

效果展示：

6.网页背景

• background-color：背景颜色
• background-image：背景图片
• background-position：背景定位
• background-repeat ：背景重复方式
• background：设置全部属性

div{           height: 700px;           background:#C00 url(../resource/imgs/3.png) 205px 10px repeat;       }

效果展示：

7.背景尺寸

• background-size

1. atuo：默认值，使用背景图片保持原样
2. percentage：当使用百分值时，不是相对于背景的尺寸大小来 计算的，而是相对于元素宽度来计算的
3. cover：整个背景图片放大填充了整个元素
4. 让背景图片保持本身的宽高比例，将背景图片缩 放到宽度或者高度正好适应所定义背景的区域

div{           width: 1000px;           height: 1000px;           background-image: url("../resource/imgs/3.png");           background-size: cover;       }

效果展示：

8.CSS3渐变

• IE浏览器是Trident内核，加前缀：-msn
• Chrome浏览器是Webkit内核，加前缀：-webkitn
• Safari浏览器是Webkit内核，加前缀：-webkitn Opera浏览器是Blink内核，加前缀：-on
• Firefox浏览器是Mozilla内核，加前缀：-moz

语法：linear-gradient ( 渐变方向,color1,color2,…)

div{           width: 1000px;           height: 1000px;           background: linear-gradient(to right,red,blue);       }

效果展示：

二、盒子模型

1.边框

边框颜色：

• border-top-color：上边框颜色
• border-right-color：右边框颜色
• border-bottom-color：下边框颜色
• border-left-color：左边框颜色
• border-color：四个边框的颜色为同一颜色

div{           width: 500px;           height: 500px;           border:50px solid;           border-top-color:red;           border-bottom-color:blue;           border-left-color:green;           border-right-color:deeppink;       }

效果展示：

• border-width：边框粗细

div{               width: 500px;               height: 500px;               border: solid;               border-top-width: 20px;               border-bottom-width: 10px;               border-left-width: 50px;               border-right-width: 50px;           }

效果展示;

• border-style：边框样式

1. none：没有边框线
2. hidden：隐藏
3. dotted：点状
4. dashed：虚线
5. solid：实线
6. double：双实线

div{               width: 500px;               height: 500px;               border: dashed;           }

效果展示：

border: 50px solid red;

效果展示：

2.外边距

• margin

1. margin-top ：设置上外边距
2. margin-right ：设置右外边距
3. margin-bottom：设置下外边距
4. margin-left：设置左外边距
5. margin：设置全部外边距（）

div{               width: 500px;               height: 500px;               background: red;               margin-top:200px;               margin-left: 50px;           }

效果展示：

3.内边距

• padding

1. padding-left
2. padding-right
3. padding-top
4. padding-bottom
5. padding

   
        
    对面的女孩你看过来    
   

div{               width: 500px;               height: 500px;               background: red;               padding-top: 200px;               padding-left: 200px;           }

效果展示：

4.盒子模型尺寸

盒子模型总尺寸=边框（border）+内边距（padding）+外边距（margin）+内容宽度

5.圆角边框

• border-radius：（左上，右上，右下，左下）边框圆角

div{               width: 500px;               height: 200px;               background: red;               border-radius:50px 100px 10px 300px ;           }

效果展示：

6.盒子阴影

• box-shadow:设置盒子阴影;
  语法：box-shadow:阴影类型 X轴位移量 Y轴位移量 阴影半径向外模糊范围 颜色;

div{               width: 500px;               height: 200px;               background: red;               box-shadow:inset  50px  50px  50px  blue;           }

效果展示：

三、浮动

1.块级元素和内联元素

常见块级元素：

• < address >定义地址
• < caption >定义表格标题
• < dd >定义列表中定义条目
• < div >定义文档中的分区或节
• < dl >定义列表
• < dt >定义列表中的项目
• < fieldset >定义一个框架集
• < form >创建 HTML 表单
• < h1 >定义最大的标题
• < h2 >定义副标题
• < h3 >定义标题
• < h4 >定义标题
• < h5 >定义标题
• < h6 >定义最小的标题
• < hr >创建一条水平线
• < legend >元素为
• < fieldset >元素定义标题
• < li >标签定义列表项目
• < noframes >为那些不支持框架的浏览器显示文本，于 frameset 元素内部
• < noscript >定义在脚本未被执行时的替代内容
• < ol >定义有序列表
• < ul >定义无序列表
• < p >标签定义段落
• < pre >定义预格式化的文本
• < table >标签定义 HTML 表格
• < tbody >标签表格主体（正文）
• < td >表格中的标准单元格
• < tfoot >定义表格的页脚（脚注或表注）
• < th >定义表头单元格
• < thead >标签定义表格的表头
• < tr >定义表格中的行

常见行元素：

• < a >标签可定义锚
• < abbr >表示一个缩写形式
• < acronym >定义只取首字母缩写
• < b >字体加粗
• < bdo >可覆盖默认的文本方向
• < big >大号字体加粗
• < br >换行
• < cite >引用进行定义
• < code >定义计算机代码文本
• < dfn >定义一个定义项目
• < em >定义为强调的内容
• < i >斜体文本效果
• < img >向网页中嵌入一幅图像
• < input >输入框
• < kbd >定义键盘文本
• < label >标签为
• < input > 元素定义标注（标记）
• < q >定义短的引用
• < samp >定义样本文本
• < select >创建单选或多选菜单
• < small >呈现小号字体效果
• < span >组合文档中的行内元素
• < strong >语气更强的强调的内容
• < sub >定义下标文本
• < sup >定义上标文本
• < textarea >多行的文本输入控件
• < tt >打字机或者等宽的文本效果
• < var >定义变量

2.display属性

• display：
• 块级元素与行级元素的转变：块（block）、行（inline）
• 控制块元素排到一行：inline-block
• 控制元素显示和隐藏：不显示（none）

3.块元素排在一行的方法

块元素排到一行有两种方法：

• inline-block

1. 可以让元素排在一行，并且支持宽度和高度，代码实现起来方便
2. 位置方向不可控制，会解析空格
3. IE 6、IE 7上不支持

• float浮动

1. 可以让元素排在一行并且支持宽度和高度，可以决定排列方向
2. float 浮动以后元素脱离文档流，会对周围元素产生影响，必须在它的父 级上添加清除浮动的样

4.float属性

• float：
• left：元素向左浮动
  2.right： 元素向右浮动
• none：默认值，元素不会浮动

#a {               width: 500px;               height: 200px;               background: red;           }           #b{                width: 500px;                height: 200px;                background: yellow;            }

浮动前效果展示：

#a {               width: 500px;               height: 200px;               background: red;               float: left;           }           #b{                width: 500px;                height: 200px;                background: yellow;                float: left;            }

浮动后效果展示：

5.清除浮动clear属性

• clear：清除属性

1. left：在左侧不允许浮动元素
2. right：在右侧不允许浮动元素
3. both：在左、右两侧不允许浮动元素
4. none：默认值，允许浮动元素出现在两侧

#a {               width: 500px;               height: 200px;               background: red;               float: left;           }           #b{                width: 500px;                height: 200px;                background: yellow;                clear: both;            }

效果展示：

6.溢出处理Overflow属性

• Overflow：设置内容溢出后展示效果

1. visible 默认值，内容不会被修剪，会呈现在盒子之外
2. hidden 内容会被修剪，并且其余内容是不可见的
3. scroll 内容会被修剪，但是浏览器会显示滚动条以便查看其余内容
4. auto 如果内容被修剪，则浏览器会显示滚动条以便查看其余的内容

   
            visible 默认值。内容不会被修剪，会呈现在盒子之外        hidden 内容会被修剪，并且其余内容是不可见的        scroll 内容会被修剪，但是浏览器会显示滚动条以便查看其余内容        auto 如果内容被修剪，则浏览器会显示滚动条以便查看其余的内visible 默认值。内容不会被修剪，会呈现在盒子之外        hidden 内容会被修剪，并且其余内容是不可见的        scroll 内容会被修剪，但是浏览器会显示滚动条以便查看其余内容        auto 如果内容被修剪，则浏览器会显示滚动条以便查看其余的内visible 默认值。内容不会被修剪，会呈现在盒子之外        hidden 内容会被修剪，并且其余内容是不可见的        scroll 内容会被修剪，但是浏览器会显示滚动条以便查看其余内容        auto 如果内容被修剪，则浏览器会显示滚动条以便查看其余的内visible 默认值。内容不会被修剪，会呈现在盒子之外        hidden 内容会被修剪，并且其余内容是不可见的        scroll 内容会被修剪，但是浏览器会显示滚动条以便查看其余内容        auto 如果内容被修剪，则浏览器会显示滚动条以便查看其余的内visible 默认值。内容不会被修剪，会呈现在盒子之外        hidden 内容会被修剪，并且其余内容是不可见的        scroll 内容会被修剪，但是浏览器会显示滚动条以便查看其余内容        auto 如果内容被修剪，则浏览器会显示滚动条以便查看其余的内visible 默认值。内容不会被修剪，会呈现在盒子之外        hidden 内容会被修剪，并且其余内容是不可见的        scroll 内容会被修剪，但是浏览器会显示滚动条以便查看其余内容        auto 如果内容被修剪，则浏览器会显示滚动条以便查看其余的内visible 默认值。内容不会被修剪，会呈现在盒子之外        hidden 内容会被修剪，并且其余内容是不可见的        scroll 内容会被修剪，但是浏览器会显示滚动条以便查看其余内容        auto 如果内容被修剪，则浏览器会显示滚动条以便查看其余的内    
   

div{            width: 500px;            height: 500px;            overflow: auto;        }

效果展示：

四、定位

1.position属性

• position：设置定位方式

1. static ： 默认值，没有定位
2. relative：相对定位
3. absolute：绝对定位
4. fixed：固定定位

转载地址：http://paiwi.baihongyu.com/