css

Cascading Style Sheet：层叠样式表，用来控制网页外观的技术

CSS引入方式

外部样式表，CSS代码单独作一文件，并在HTML文件中通过link引入

  
<head>
    <link rel="stylesheet" type="text/css" href="CSS文件路径">
</head>

内部样式表

在style中自定义

  
<head>
    <style text="text/css">
        div{text-align: center}
    </style>
</head>

行内样式表

在标签的style属性中定义

选择器

选用指定的标签，定义CSS样式

  
<head>
    <style>
        <!-- 元素 -->
        div{
            height: 640px;
            /*width: 640px;*/
            border-width: 30px;
            border-style: solid;
            border-color: hotpink;
        }
        <!-- class -->
        .out{
            position: relative;
            left: 239.6px;
            right: 239.6px;
        }
        <!-- 后代：father下的所有div标签 -->
        #father div{
            width: 800px;
            height: 600px;
            background-color: white;
        }
        <!-- id -->
        #away{
            clear: both;
        }
        <!-- 群组 -->
        div,p,span,.out,#father{
            color: red;
        }

    </style>
</head>

元素选择器
id，唯一标识一个标签,引用时需用#标识
class，可标记多种标签，class值相同的标签共用同一种样式，需用.标识
后代选择器
群组选择器

字体样式

font-family:“宋体”，“Time New Roman”，Arial，可以定义多个，按顺序优先使用已安装的字体
字体大小：font-size:10px
font-style:normal(默认)，italic(斜体)，oblique(斜体)
font-weight:normal(默认)，lighter(较细)，bold(较粗)，bolder(很粗)
color:red，#FBF9D0(RGB值)

文本样式

首行缩进：text-indent:2倍字体像素值
水平对齐：text-align:center，left，right，对文本和图片均有效
text-decoration:none,underline，line-through，overline，去除划线效果（超链接下划线效果去除），下划线，删除线，顶划线
大小写转换：text-transform:none,uppercase,lowercase,capitalize(首字母大写)
行高：line-height:10px，有行间距的效果
字间距，单词间距：letter-spacing:10px,word-spacing:10px，一个中文汉字和一个英文字母都算一个字

边框样式

几乎所有标签都可以定义边框

border-width:10px
border-style:
- none，无（边框将不存在）
- dashed，虚线
- solid，实现
border-color

一般定义用简写：boder:1px solid red 另外还包括局部边框：border-top,border-bottom,border-left,border-right

列表样式

list-style-type

对ol标签

decimal，（1，2，···）
lower-roman，（i，iii，···）
upper-roman
lower-alpha，（a,b,···）
upper-alpha

对ul标签

disc
circle
aquare

去除列表符号

ol,ul{list-style-type:none;}
自定义列表符号，ol,ul{list-style-image:url(图片路径);}

表格样式

表格标题位置：caption-side:top,bottom
表格边框合并：border-collapse:collapse,separate，合并，默认
表格边框间距：border-spacing:8px

图片样式

1.图片大小

weight
height

2.图片边框

边框样式

3.图片对齐

文本水平对齐样式，在img标签的父标签种定义才能生效

4.浮动

img{float:left/right}，修饰后的块可与其他块共处一行

背景样式

1.背景图片地址：background-image:url(图片路径) ，引入背景图片之前要先定义块的大小，至少与图片大小相同，图片才能正常显示

2.图片重复：background-repeat

repeat（默认）
repeat-x，repeat-y（水平或垂直方向平铺）
no-repeat （不平铺）

3.图片位置：background-position:水平距离垂直距离(相对于页面左上角)

像素值语法
关键词语法

4.图片固定：background-attachment:scroll,fixed（图片随页面一起滚动，固定不动）

5.背景颜色：background-color

超链接样式

超链接伪类

a:link，未访问样式
a:visited，已访问后
a:hover，鼠标经过的样式另外它也可以定义其他标签在鼠标经过时的样式，如div:hover，img:hover
a:active，鼠标点击激活时的样式

鼠标样式

cursor:default,pointer,text，(默认箭头样式，手状样式，I样式)

自定义鼠标样式

cursor:url(图片地址,通常是.cur文件)，pointer/default/text

CSS盒子模型

页面中的所有标签都可看成一个盒子，占据着一定的页面空间

context
padding内边距：定义文本在块中的相对位置

div{padding-top:8px;padding-right:9px;padding-bottom:10px;padding-left:11px;}
div{padding:8px 9px 10px 11px}，效果同上
div{padding:8px 10px}=div{padding-top:8px;padding-bottom:8px;padding-right:10px;padding-left:10px;}
div{padding:8px}=div{padding-top:8px;padding-bottom:8px;padding-right:8px;padding-left:8px;}

margin外边距：块与块之间的相对距离，格式同 padding
border
weight，height在块标签中可以生效，行内标签无法生效

布局

定位页面中的标签

浮动布局

float:left/right

清除浮动布局

clear:both,left,right

定位布局(定义顺序)

position:fixed,relative,absolute,static，固定定位（相对于浏览器左上角），相对定位（相对于标签原来位置），绝对定位（相对于浏览器左上角），静态定位（默认）
top
bottom
left
right

CSS引入方式

选择器

字体样式

文本样式

边框样式

列表样式

list-style-type

表格样式

图片样式

背景样式

超链接样式

鼠标样式

CSS盒子模型

布局

相关文章

panel盒子设置上下左右四个边框

伪元素选择器

定位