Css样式整理

qq_51382798

已于 2022-08-12 13:55:09 修改

阅读量218

点赞数

文章标签： css html

于 2022-08-12 13:54:47 首次发布

本文链接：https://blog.csdn.net/qq_51382798/article/details/126302378

版权

一、字体属性：

font

大小 {font-size: x-large;}(特大) xx-small;(极小) 一般中文用不到，只要用数值就可以，单位：PX、PD

样式 {font-style: oblique;}(偏斜体) italic;(斜体) normal;(正常)

行高 {line-height: normal;}(正常) 单位：PX、PD、EM

粗细 {font-weight: bold;}(粗体) lighter;(细体) normal;(正常)

变体 {font-variant: small-caps;}(小型大写字母) normal;(正常)

大小写 {text-transform: capitalize;}(首字母大写) uppercase;(大写) lowercase;(小写) none;(无)

修饰 {text-decoration: underline;}(下划线) overline;(上划线) line-through;(删除线) blink;(闪烁)

常用字体： (font-family)

"Courier New", Courier, monospace, "Times New Roman", Times, serif, Arial, Helvetica, sans-serif, Verdana

二、盒子模型

padding-top:10px; /*上边框留空白*/

padding-right:10px; /*右边框留空白*/

padding-bottom:10px; /*下边框留空白*/

padding-left:10px; /*左边框留空白

每个div可以看成一个盒子

一个盒子中主要的属性有5个：width、height、padding、border、margin。如下：

width：内容的宽度。CSS中 width 指的是内容的宽度，而不是盒子的宽度。盒子的宽度=内容宽度+padding+border

height：内容的高度。CSS中 height 指的是内容的高度，而不是盒子的高度。盒子的高度=内容高度+padding+border

padding：内边距。

border：边框。

margin：外边距。

三、符号属性：

list-style-type:none; /*不编号*/

list-style-type:decimal; /*阿拉伯数字*/

list-style-type:lower-roman; /*小写罗马数字*/

list-style-type:upper-roman; /*大写罗马数字*/

list-style-type:lower-alpha; /*小写英文字母*/

list-style-type:upper-alpha; /*大写英文字母*/

list-style-type:disc; /*实心圆形符号*/

list-style-type:circle; /*空心圆形符号*/

list-style-type:square; /*实心方形符号*/

list-style-image:url(/dot.gif); /*图片式符号*/

list-style-position: outside; /*凸排*/

list-style-position:inside; /*缩进*/

四、背景：

background-color:#F5E2EC; /*背景颜色*/

background:transparent; /*透视背景*/

background-image : url(/image/bg.gif); /*背景图片*/

background-attachment : fixed; /*浮水印固定背景*/

background-repeat : repeat; /*重复排列-网页默认*/

background-repeat : no-repeat; /*不重复排列*/

background-repeat : repeat-x; /*在x轴重复排列*/

background-repeat : repeat-y; /*在y轴重复排列*/

指定背景位置

background-position : 90% 90%; /*背景图片x与y轴的位置*/

background-position : top; /*向上对齐*/

background-position : buttom; /*向下对齐*/

background-position : left; /*向左对齐*/

background-position : right; /*向右对齐*/

background-position : center; /*居中对齐*/

五、链接：

a /*所有超链接*/

a:link /*超链接文字格式*/

a:visited /*浏览过的链接文字格式*/

a:active /*按下链接的格式*/

a:hover /*鼠标转到链接*/

鼠标光标样式：

链接手指 CURSOR: hand

十字体 cursor:crosshair

箭头朝下 cursor:s-resize

十字箭头 cursor:move

箭头朝右 cursor:move

加一问号 cursor:help

箭头朝左 cursor:w-resize

箭头朝上 cursor:n-resize

箭头朝右上 cursor:ne-resize

箭头朝左上 cursor:nw-resize

文字I型 cursor:text

箭头斜右下 cursor:se-resize

箭头斜左下 cursor:sw-resize

漏斗 cursor:wait

光标图案(IE6) p {cursor:url("光标文件名.cur"),text;}

六、边框：

border

border : 边框像素大小边框样式边框颜色

border-top : 1px solid #6699cc; /*上框线*/

border-bottom : 1px solid #6699cc; /*下框线*/

border-left : 1px solid #6699cc; /*左框线*/

border-right : 1px solid #6699cc; /*右框线*/

solid /*实线框*/

dotted /*虚线框*/

double /*双线框*/

groove /*立体内凸框*/

ridge /*立体浮雕框*/

inset /*凹框*/

outset /*凸框*/

七、form表单：

输入控件

<input type=”submit” value=”按钮上显示的文字”>

提交按钮：input type = “submit”;

普通按钮：input type = “button”,一般会绑定一个方法使用

重置按钮：input type = “reset” 让页面恢复到初始化的状态

文本框

<input type=”text”>

用户名:<input type="text" name="username" value="admin" placeholder="请输入6~8位字符"><br>

placeholder 文本框提示的信息

value文本框的值

密码框

<input type=”password”>

密码： <input type="password" name="pwd"><br>

单选框

1. 一组单选框, name值必须相同

2. value值必须设置

3. 设置单选框的选中状态 checked , checked="checked" checked="true"

性别：<input type="radio" name="sex" value="1" >男

<input type="radio" name="sex" value="2" checked>女<br>

复选框

Checkbox 后台接收复选框的值，通过数组接收

爱好：<input type="checkbox" name="hobbies" value="唱">唱

  <input type="checkbox" name="hobbies" value="跳" checked>跳

  <input type="checkbox" name="hobbies" value="rap">rap

  <input type="checkbox" name="hobbies" value="学习"/>学习

  <input type="checkbox" name="hobbies" value="打游戏"> 打游戏<br /><br>

下拉框

select

家庭住址：<select name="address">

                  <option value="001">辽宁</option>

                 <option value="002">广西</option>

                 <option value="003" selected>贵州</option>

                 <option value ="004">山西</option>

                 </select><br>

3.7文本域

Textarea

内容要写在开始标签和结束标签中间，没有value.

Cols:每一行可以输入多少字符。

Rows:行