CSS样式操作大全——基本语法篇

野性酷女 2021-07-24 16:33 544阅读 0赞

CSS样式操作大全——基本语法篇

**目录**

1、文字font操作系列

2、背景background操作系列

3、框线、边框、位置操作系列

4、ul或者ol标签里的li标签

5、鼠标样式

6、图文混排

7、超链接

8、定位HTML元素

9、禁止双击文字时候选中文字的内容

--------------------

样式设置方法

.class   \#id  HTML标签\{    //写样式  \}     //三种样式选择器

# 1、文字font操作系列 #

.text{
        color:black  ;//字体颜色
        font-size: 15px;  //字体大小
        font-style: italic;  //样式oblique（偏斜体）、italic(斜体)、normal(正常)
        line-height: 2px;  //行高px、pd、em
        font-weight: bold;  //粗细：bold黑体、lighter细体、normal正常
        text-transform: uppercase;//大小写：capitalize首字母大写 uppercase;(大写) lowercase;(小写
        text-decoration: underline;  //字体修饰underline下划线、overline上划线、line-through删除线、blink闪烁、none删除超链接下划线
        font-family: 'Courier New', Courier, monospace; //字体，常用字体"Times New Roman", Times, serif, Arial, Helvetica, sans-serif, Verdana,"Microsoft YaHei",微软雅黑,"MicrosoftJhengHei",华文细黑,STHeiti,MingLiu;
        text-align:right;//文字对齐：right右对齐、left左对齐、center居中、justify分散对齐、
        vertical-align：top;//垂直对齐：top垂直上对齐、bottom垂直下对齐、middle垂直中对齐、text-top文字垂直向上对齐、text-bottom文字垂直向下对齐
        letter-spacing:5px;//字符间距
        text-indent:5px ;   //字符缩进
      }

# 2、背景background操作系列 #

背景色background-color:\#FFFFFF;

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

重复background-repeat:no-repeat;  //repeat-x在X轴重复排列；/repeat-y在y轴重复排列；

滚动background-attachment:fixed；固定；scroll滚动

位置background-position:left；左对齐；top向上对齐；bottom向下对齐；right右对齐；center居中对齐

# 3、框线、边框、位置操作系列 #

边框线 border:1px solid \#FFFFFF;  //宽度，线样式（实线），线颜色

*  border-top：上边框，其他同理
 *  线样式border-style：solid实线、dotted虚线、double双实线、groove立体内凸框、ridge立体浮雕框、inset凹框、outset凸框

margin:0px;  //外边距，上右下左；auto居中；0 auto左右居中；auto  0上下居中

padding:0px; //内边距，上右下左

# 4、ul或者ol标签里的li标签 #

li-style-type:none;//列样式：none不编号；decimal数字；lower-alpha小写英文；upper-alpha大写英文；disc实心圆；squar实心                     方形

li-style-image：url(/dot.gif)  ；列样式图片

# 5、鼠标样式 #

cursor:hand；//手指

*  crosshair：十字
 *  move:十字箭头
 *  help：加个问号
 *  w-resize：箭头朝左
 *  s-resize：箭头朝下
 *  n-resize：箭头朝上
 *  ne-resize：箭头朝右上
 *  nw-resize：箭头左上
 *  text：I型文字
 *  wait：漏斗

# 6、图文混排 #

float:文字环绕在元素四周none/left/right

clear:定义某边是否有环绕文字none/left/right

# 7、超链接 #

a:link  普通

a:visited：已访问

a:active  活动

a:hover  悬停

# 8、定位HTML元素 #

position：absolute、relative、static

left：%、auto、5px

top：