首页 css
文章
取消

css

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

CSS引入方式

  • 外部样式表,CSS代码单独作一文件,并在HTML文件中通过link引入
1
2
3
<head>
    <link rel="stylesheet" type="text/css" href="CSS文件路径">
</head>
  • 内部样式表

在style中自定义

1
2
3
4
5
<head>
    <style text="text/css">
        div{text-align: center}
    </style>
</head>
  • 行内样式表

在标签的style属性中定义

选择器

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
<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,一个中文汉字和一个英文字母都算一个字

边框样式

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

  1. border-width:10px
  2. border-style:

    • none,无(边框将不存在)
    • dashed,虚线
    • solid,实现
  3. border-color

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

列表样式

list-style-type

  1. 对ol标签
  • decimal,(1,2,···)
  • lower-roman,(i,iii,···)
  • upper-roman
  • lower-alpha,(a,b,···)
  • upper-alpha
  1. 对ul标签
  • disc
  • circle
  • aquare
  1. 去除列表符号
  • 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内边距:定义文本在块中的相对位置
  1. div{padding-top:8px;padding-right:9px;padding-bottom:10px;padding-left:11px;}
  2. div{padding:8px 9px 10px 11px},效果同上
  3. div{padding:8px 10px}=div{padding-top:8px;padding-bottom:8px;padding-right:10px;padding-left:10px;}
  4. 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

  • 定位布局(定义顺序)
  1. position:fixed,relative,absolute,static,固定定位(相对于浏览器左上角),相对定位(相对于标签原来位置),绝对定位(相对于浏览器左上角),静态定位(默认)
  2. top
  3. bottom
  4. left
  5. right
本文由作者按照 CC BY 4.0 进行授权