CSS学习笔记

发表于 | 分类于

层叠样式表CSS(Cascading Style Sheets)与HTML搭配使用，共同构建前端页面。HTML负责内容，CSS负责显示，达到了样式与内容的分离。

HTML引入CSS

三种方式引入CSS，W3C的文章说的很清楚。

  • 外部样式表

    当样式需要被应用到很多页面的时候，外部样式表将是理想的选择。使用外部样式表，你就可以通过更改一个文件来改变整个站点的外观。

    1
    2
    3
    <head>
    <link rel="stylesheet" type="text/css" href="mystyle.css">
    </head>

  • 内部样式表

    当单个文件需要特别样式时，就可以使用内部样式表。你可以在 head 部分通过 <style>标签定义内部样式表。

    1
    2
    3
    4
    5
    6
    7
    <head>

    <style type="text/css">
    body {background-color: red}
    p {margin-left: 20px}
    </style>
    </head>

  • 内联样式

    当特殊的样式需要应用到个别元素时，就可以使用内联样式。 使用内联样式的方法是在相关的标签中使用样式属性。样式属性可以包含任何 CSS 属性。以下实例显示出如何改变段落的颜色和左外边距。

    1
    2
    3
    <p style="color: red; margin-left: 20px">
    This is a paragraph
    </p>

学习过程中，使用内联样式进行效果演示。

背景样式

背景颜色，默认的颜色是transparent

颜色的表示方式有三种：

  1. 文字
1
<body style="background-color:gray;">
  1. RGB，红绿蓝三原色。用两个字节来表示，红色#FF0000。
1
<body style="background-color:#FF0000;">
  1. 另一种是数值rgb(255, 255, 255)
1
<body style="background-color:rgb(255,0,0);">

CSS3引入了新的一种方式rgba，最后一个参数α可以简单理解为透明度。

1
<body style="background-color:rgba(255,0,0,0.5);">

背景图片

背景是图片加上上文的rgba, 可以做出内层的标记浮在背景图片上的效果。

1
2
3
4
5
<body style="background-image:url(timg1440x900.jpg);">
<p style="background-color: rgba(255,0,0,0.5)">
    这是第一段
</p>
</body>

对于背景图片background-image属性，当使用的图片较小时有一些特点：

  • 会自动复制进行填充当前页面，
  • 也可以不重复。
  • 可以在x和y方向进行重复 repeat-x，repeat-y
1
2
3
<body style="background-image:url(timg213x160.jpg);
             background-repeat:repeat-x;">
</body>

当设定为no-repeat时，可以对位置background-position进行设定:

  • center left top right
  • 绝对位置100px 100px
1
2
3
4
<body style="background-image:url(timg213x160.jpg);
             background-repeat:no-repeat;
             background-position:top right">
</body>

默认是让背景图片随着文字一起滚动，可以设定background-attanchment为fixed，即背景则不会随着页面一起滚动。

1
2
3
4
5
6
7
8
<body style="background-image:url(timg213x160.jpg);
             background-attanchment:fixed;">
<p style="background-color: rgba(255,0,0,0.5)">
    这是第一段
    <br><br><br><br><br><br><br><br><br><br>
    为了看出效果，加很多换行。
</p>
</body>

小结：学习了背景颜色，背景图片一些样式表写法。

文本样式

段落

段落文字的颜色color

1
2
3
4
5
<body>
    <p style="color:red">
        我是一个段落
    </p>
</body>

段落的缩进text-indent

单位可以em(em-quads)和10%这种相对单位。也有px，pt（印刷上的单位=1/72inch）,cm,mm和in这种绝对的单位。

1
2
3
4
5
<body>
    <p style="text-indent:2em">
        我是一个段落,为了体现缩进，所以我需要说很多很多很多很多很多很多很多很多很多很多很多很多很多很多很多很多很多很多很多的话。
    </p>
</body>

有趣的一点是，缩进设定为负值。下面的例子是这种可以实现悬挂缩进效果

1
2
3
4
5
<body>
    <p style="text-indent:-2em; padding:2em;">
        我是一个段落,为了体现悬挂缩进，所以我需要说很多很多很多很多很多很多很多很多很多很多很多很多很多很多很多很多很多很多很多很多很多很多很多很多很多很多很多很多很多很多很多很多很多很多很多很多很多很多很多很多很多很多很多很多很多很多的话。
    </p>
</body>

段落的行高line-height

1
2
3
4
5
<body>
    <p style="text-indent:2em;line-height:2em;">
        我是一个段落,为了体现行高，所以我需要说很多很多很多很多很多很多很多很多很多很多很多很多很多很多很多很多很多很多很多很多很多很多很多很多很多很多很多很多很多很多很多很多很多很多很多很多很多很多很多很多很多很多很多很多很多很多的话。
    </p>
</body>

段落对齐方式text-align

对齐方式有align，left，right，center，justify（两端对齐）

1
2
3
4
5
<body>
    <p style="text-indent:2em;text-align:right;">
        我是一个段落,为了对齐方式，所以我需要说很多很多很多很多很多很多很多很多很多很多很多很多很多很多很多很多很多很多很多很多很多很多很多很多很多很多很多很多很多很多很多很多很多很多很多很多很多很多很多很多很多很多很多很多很多很多的话。
    </p>
</body>

段落中空格的宽度word-spacing, 字符间的宽度letter-spacing

1
2
3
4
5
6
<body>
    <p style="text-indent:2em;wrod-spacing:10px; letter-spacing:10px">
        我是一个段落,为了空格的宽度，我要说几个的 空      格。
        为了体现字符间距，我还是要说很多很多很多很多很多很多很多很多很多很多很多很多很多很多很多很多很多很多很多的话。
    </p>
</body>

段落中文字的大小写转换，text-transform

可以设置为：uppercase(英文转大写), lowercase(英文转小写), capitalize(英文转首字母大写)

1
2
3
4
5
<body>
    <p style="text-indent:2em;text-transform:uppercase;">
        我是一个段落,为了体现文字的大小写转换，所以我需要说个hello。
    </p>
</body>

文字装饰text-decoration

可以是underline上划线，overline下划线，line-through中横线

1
2
3
4
5
<body>
    <p style="text-indent:2em;text-decoration:underline overline">
        我是一个段落,为了体现划线，所以我需要说很多很多很多很多很多很多很多很多很多很多很多很多很多很多很多很多很多很多很多的话。你看这样像不像稿纸的样式？
    </p>
</body>

对空白字符的处理white-space

pre（有多少回车有多少空格全都生效，且不会做自动的卷绕)，

pre-wrap（有多少回车有多少空格全都生效，做自动的卷绕），

nowrap不卷绕,

pre-line合并空格，保留换行

字体

字体的样式font-family

可以指定通用字体的大类，也可以指定具体的字体名称

通用字体大类

  • serif 大多数的英文字体都是serif，矢量字体，有点类似花体，竖线的上有小横线
  • sans-serif，竖线上没有小横线
  • monospace 等宽字体，用于程序代码和终端输出
  • cursive 类似手写的字体，草书
  • fantansy 无法归类的字体

一般的做法是，指定保险的做法是，指定特定的字体，再指定某个通用字体的大类。

1
<p style="font-family: Times, TimeNR, serif"></p>

字体常用属性

font-style: 可设为normal，italic(是使用字体的斜体)，oblique(是让没有斜体属性的字体倾斜)

font-variant: 可以变为大小写small-caps

font-weight: 笔画宽度，可以设为bold粗体或者数值

font-size: 字体大小，可以设为px em，推荐还是用em

文字效果

就像以前用word做艺术字的感觉，只不过是换成了代码的方式表达。

文字阴影效果text-shadow

三个参数，第一个是向右，第二个是向下，第三个是发散的宽度

1
<p style="text-shadow:3px 4px 5px rgba(0,255,0,1)"></p>

雕刻的效果

1
<p style="text-shadow:0px -1px 0px #000000, 0px 1px 3px #606060; color:#606060">INSET</p>

边框outline-style

可以设为:dashed短划线 dotted点线 double双线 groove 凹槽 outset凸的边 inset凹的边

1
<p style="outline-color:red;outline-style:solid;outline-width:thin">INSET</p>

列表

就是前面那个小黑圆可以换成其他的样式。disc，circle，squre

1
2
3
4
5
6
7
<body>
    <ul style="list-style-type:squre ">
        <li>Mirror</li>
        <li>sFlow</li>
        <li>Security</li>
    </ul>
</body>

可以使用自定义的图片

1
2
3
4
5
6
7
<body>
    <ul style="list-style-image:url(timg213x160.jpeg) ">
        <li>Mirror</li>
        <li>sFlow</li>
        <li>Security</li>
    </ul>
</body>

小圆点是不是属于文字的一部分，inside属于，outside不属于。只有文字换行时才能看出区别。

1
2
3
4
5
6
7
<body>
    <ul style="list-style-position:outside">
        <li>Mirror</li>
        <li>sFlow</li>
        <li>Security</li>
    </ul>
</body>

表格

表格的样式，border可以设为实线solid

border-collapse 当设为 collapse 效果为当有多余的线的时候，合并为一条线。separate则为一条线

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<body>
    <table style="border: 1px solid blue;border-collapse:collapse;">
        <caption>Our Module</caption>
    	<tr>
            <th style="border: 1px solid blue">Mirror</th>
          	<th style="border: 1px solid blue">sFlow</th>
            <th style="border: 1px solid blue">Security</th>
        </tr>
        <tr>
            <td style="border: 1px solid blue">200</td>
            <td style="border: 1px solid blue">100</td>
            <td style="border: 1px solid blue">300</td>            
        </tr>
    </table>
</body>

表格可以设置大小

1
<th style="width:100;height:50px">

表格中的文字可以规定排版方式

1
<th style="vertical-align:top;text-align:right">

padding 可以指定和边线之间的距离，框模型中可以深刻理解一下。

1
<th style="vertical-align:top;text-align:right;width:100px;height:50px;padding:20px">

对于表格的标题的位置，可以指定caption-side

1
<table style="caption-side:bottom;">

table-layout 设为automatic对于大表就会有点慢，也会不断变化。fixed由第一行来指定表格的大小显示，可以很快地显示出来。

框模型

框模型又叫盒模型

CSS 框模型 (Box Model) 规定了元素框处理。看这篇W3C的解释文章，可以加深理解。

简而言之，元素内容、内边距、边框和外边距这四者之间的关系。

padding就是内边距，margin就是外边距。每一个元素都是一个框框。

可以指定四边的边距padding-top:10，也可以分别指定边距padding:10 20 30 40 , 不是上下左右，而是上右下左（顺时针方向）

1
<p style="margin:10px 20px 30px 40px">一个段落，和上右下左其他的元素都隔开10，20，30，40</p>

padding不能设为负值，margin是允许负值的。当两个相邻的元素的margin一起，则是取二者大的那个值

CSS 定位

HTML是一种流式的排版格式，所有的元素是从左往右，从上往下流式地填满，以前的定位是通过表格来实现的。CSS定位，就是将某一个块状的元素放置到某个固定的位置。CSS1就已经提出元素是浮动的。如果要对CSS元素定位，方式有三种方式的定位：相对定位，绝对定位

浮动定位。

  • 相对定位

不管margin的事实，会在元素该有的地方，进行偏移。原来的第二行的位置不会受影响

1
2
3
4
5
6
7
8
9
10
<body>
    <div>
        <p style="position:relative;">
			我是第一段
        </p>
        <p>
			我是第二段
        </p>
    </div>
</body>
  • 绝对定位

会把元素从原有的流式定位上去掉。然后第一段的定位是从不断找父元素，div未定位，body定位了，则显示在body的位置上。第二段则会因为第一段从流式定位的去除，则到第一位上。

1
2
3
4
5
6
7
8
9
10
<body>
    <div>
        <p style="position:absolute;">
			我是第一段
        </p>
        <p>
			我是第二段
        </p>
    </div>
</body>

  • 浮动定位

    会将某个元素永远定在一个地方。压缩页面，它会挤占原来的元素，CSDN那种讨厌的广告应该就是这个原理。

1
2
3
4
5
6
7
8
9
10
11
<body>
    <div>
        <img src="timg213x160.jpg" style="float:right">
        <p style="position:absolute;">
			我是第一段
        </p>
        <p>
			我是第二段
        </p>
    </div>
</body>

div是一种块状元素。span是一种行内的块状元素。h5出现了很多的不同名字的div，比如slide，header，foot等，这些块状元素就用来结合定位技术使用。

CSS选择器

选择器就是选定某些标记，对其的样式进行管理。

元素选择器最后呈现的效果是叠加的

1
2
3
4
5
6
<head>
    <style>
        p,th,td {border: 1px solid blue}
        p {background:red}
    </style>
</head>

类选择器

*.important的意思是所有类名class为important的元素

1
2
3
4
5
6
7
8
9
10
11
12
<head>
    <style>
        p,th,td {border: 1px solid blue}
        p {background:green}
        *.important {color:red}
    </style>
</head>
<body>
    <p class="important">我是一个class为important的paragraph</p>
    <p>我是普通的paragraph</p>
    <p>我是普通的paragraph</p>
</body>

p.important则是所有id为important的p

#important则是指id选择器，用#而不是用.来进行选择

1
2
3
4
5
6
7
8
9
10
11
12
<head>
    <style>
        p,th,td {border: 1px solid blue}
        p {background:green}
        *#important {color:red}
    </style>
</head>
<body>
    <p id="important">我是一个class为import的paragraph</p>
    <p>我是普通的paragraph</p>
    <p>我是普通的paragraph</p>
</body>

有title这个属性的标记。

1
2
3
4
5
6
7
8
9
10
11
12
<head>
    <style>
        p,th,td {border: 1px solid blue}
        p {background:green}
        *[title]{color:red}
    </style>
</head>
<body>
    <p id="important">我是一个class为important的paragraph</p>
    <p title="paragraph with title">我是有title的paragraph</p>
    <p>我是普通的paragraph</p>
</body>

子元素选择器

p em这种情况是子选择器，p>em则p标签一定是em的上级标签。h1+p则对p标签相邻的em标签

1
2
3
4
5
6
7
8
9
10
11
12
<head>
    <style>
        p,th,td {border: 1px solid blue}
        p em {background:green}
        *[title]{color:red}
    </style>
</head>
<body>
    <p id="important">我是一个class为import的paragraph</p>
    <p title="paragraph with title">我是普通的paragraph</p>
    <p>我是<em>普通</em>的paragraph</p>
</body>

超链接所涉及到的伪类

{color:#FFFFFF} 已访问
1
2
3
4
a:link {color:#FF0000} 点击时
a:hover {color:#00FF00} 悬停时
a:active {color:#0000FF} 未访问
a:visited {color:#FFFFFF} 已访问
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<head>
    <style>
        a {color:#000000;}
        a:visited {color:#FFFFFF}
        a:link {color:#FF0000}
        a:hover {color:#00FF00}
        a:active {color:#0000FF}
    </style>
</head>
<body>
    <a href="http://www.baidu.com">百度</a>
    <a href="http://news.163.com">网易</a>
    <a href="http://news.qq.com">qq</a>
    <a href="http://news.sohu.com">搜狐</a>
    <a href="http://news.yahoo.com">雅虎</a>
</body>

总结

了解一些CSS常见用法。知道了HTML如何引入CSS，背景样式，段落样式，文字样式，表格样式，CSS框模型，CSS选择器。

参考

  1. 翁恺的CSS3课程
  2. W3C的CSS参考