CSS 详解

CSS 简介

css是英文Cascading Style Sheets的缩写,称为层叠样式表，用于对页面进行美化。

存在方式有三种：元素内联、页面嵌入和外部引入，比较三种方式的优缺点。

语法：style = 'key1:value1;key2:value2;'

在标签中使用 style='xx:xxx;'
在页面中嵌入 < style type="text/css"> </style > 块
引入外部css文件

CSS选择器

标签选择器

div{ background-color:red; }
<div > </div>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>战神</title>
    <style>
        div{
            background-color: aquamarine;
            border:1px solid red;
            width: 900px;
            height:1000px;
            margin: 0 auto
        }
    </style>
</head>
<body>
  <div>
  </div>
</body>
</html>

class选择器

.bd{ background-color:red; }
<div class='bd'> </div>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>战神</title>
    <style>
        .ceshi{
            background-color: aquamarine;
            border:1px solid red;
            width: 900px;
            height:1000px;
            margin: 0 auto
        }
    </style>
</head>
<body>
  <div class="ceshi">
  </div>
</body>
</html>

id选择器

#idselect{ background-color:red; }
<div id='idselect' > </div>

关联选择器

#idselect p{ background-color:red; }
<div id='idselect' > <p> </p> </div>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>战神</title>
    <style>
        .ceshi p{
            color: red;
        }
    </style>
</head>
<body>
  <div class="ceshi">
      <p>我是一个兵，来自老百姓</p>
  </div>
  <p>好人一生平安</p>
</body>
</html>

组合选择器

input,div,p{ background-color:red; }

属性选择器

input[type='text']{ width:100px; height:200px; }

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>战神</title>
    <style>
        p[name="test"]{
            color: red;
        }
    </style>
</head>
<body>
  <div class="ceshi">
      <p>我是一个兵，来自老百姓</p>
  </div>
  <p name="test">好人一生平安</p>
</body>
</html>

CSS 定位

CSS 定位 (Positioning) 属性允许你对元素进行定位。

CSS 为定位和浮动提供了一些属性，利用这些属性，可以建立列式布局，将布局的一部分与另一部分重叠，还可以完成多年来通常需要使用多个表格才能完成的任务。

CSS 定位属性允许你对元素进行定位。

positon：

static 默认值。没有定位，元素出现在正常的流中（忽略 top, bottom, left, right 或者 z-index 声明）。

relative 生成相对定位的元素，相对于其正常位置进行定位。因此，"left:20" 会向元素的 LEFT 位置添加 20 像素。

absolute 生成绝对定位的元素，相对于static定位以外的第一个父元素进行定位。元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定。通常和relative一起使用，相对于relative 的元素进行定位。

fixed 生成固定定位的元素，相对于浏览器窗口进行定位。元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定。

top：

top 属性规定元素的顶部边缘。该属性定义了一个定位元素的上外边距边界与其包含块上边界之间的偏移

right：

属性规定元素的右边缘。该属性定义了定位元素右外边距边界与其包含块右边界之间的偏移

bottom：

bottom 属性规定元素的底部边缘。该属性定义了定位元素下外边距边界与其包含块下边界之间的偏移。

left：

left 属性规定元素的左边缘。该属性定义了定位元素左外边距边界与其包含块左边界之间的偏移

z-index：

z-index 属性设置元素的堆叠顺序。拥有更高堆叠顺序的元素总是会处于堆叠顺序较低的元素的前面。

vertical-align：

vertical-align 属性设置元素的垂直对齐方式。

示例代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        #waibu {
            width: 500px;
            height: 300px;
            background-color: blanchedalmond;
            margin: auto;
            position: relative;
            text-align: center;
            color: red;
        }
        #neibu {
            width: 100px;
            height: 100px;
            position: absolute;
            background-color: aqua;
            bottom: 0px;
            right: 0px;
        }

    </style>
</head>
<body>
<div id="waibu">
        我是一个兵，来自老百姓，<br/>
        打败了日本够强盗，<br/>
        消灭了蒋匪军。
    <div id="neibu"></div>
</div>
</body>
</html>

CSS 框模型

模型如下图：

padding：

padding 属性定义元素的内边距。padding 属性接受长度值或百分比值，但不允许使用负值。

两种设置方式

直接设置四个内边距

h1 {padding: 10px 0.25em 2ex 20%;}

单独设置每个内边距

h1 {
  padding-top: 10px;
  padding-right: 0.25em;
  padding-bottom: 2ex;
  padding-left: 20%;
  }

border：

CSS border 属性允许你规定元素边框的样式、宽度和颜色。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div style="border: solid 1px red ; margin: auto; width: 300px; height: 300px;">  # 依次设置下面的三个属性
</div>
</body>
</html>

边框的样式

p.aside {border-style: solid dotted dashed double;}  # 为四个边框设置，不同的样式.

边框宽度

p {border-style: solid; border-width: 5px;}

边框的颜色

p {
  border-style: solid;
  border-color: blue rgb(25%,35%,45%) #909090 red;
  }

margin：

margin 属性接受任何长度单位，可以是像素、英寸、毫米或 em。

margin 可以设置为 auto。

一次性设置外边距

p {margin: 20px 30px 30px 20px;}

逐个设置外边距

h2 {
  margin-top: 20px;
  margin-right: 30px;
  margin-bottom: 30px;
  margin-left: 20px;
  }

CSS 样式

CSS 背景

1. 背景色

background-color

为元素设置背景色。这个属性接受任何合法的颜色值。

p {background-color: gray;}

2. 背景图像

background-image

要把图像放入背景，需要使用 background-image 属性。background-image 属性的默认值是 none，表示背景上没有放置任何图像。

设置一个背景图像，必须为这个属性设置一个 URL 值：

body {background-image: url(/i/eg_bg_04.gif);}

3. 背景重复

background-repeat

如果需要在页面上对背景图像进行平铺，可以使用 background-repeat 属性。

属性值 repeat 导致图像在水平垂直方向上都平铺，就像以往背景图像的通常做法一样。repeat-x 和 repeat-y 分别导致图像只在水平或垂直方向上重复，no-repeat 则不允许图像在任何方向上平铺

body
  { 
  background-image: url(/i/eg_bg_03.gif);
  background-repeat: repeat-y;
  }

4. 背景定位

background-position

利用 background-position 属性改变图像在背景中的位置。

body
  { 
    background-image:url('/i/eg_bg_03.gif');
    background-repeat:no-repeat;
    background-position:center;
  }

CSS 文本

文本属性，可以改变文本的颜色、字符间距，对齐文本，装饰文本，对文本进行缩进，等等。

1. 缩进文本

text-indent

该属性可以方便地实现文本缩进

p {text-indent: -5em;}

2. 水平对齐

text-align

值 left、right 和 center 会导致元素中的文本分别左对齐、右对齐和居中

h1 {text-align:center}
h2 {text-align:left}
h3 {text-align:right}

3. 字间隔

word-spacing

word-spacing 属性可以改变字（单词）之间的标准间隔。其默认值 normal 与设置值为 0 是一样的。

<html>
<head>
<style type="text/css">
p.spread {word-spacing: 30px;}
p.tight {word-spacing: -0.5em;}
</style>
</head>

<body>
<p class="spread">This is some text. This is some text.</p>
<p class="tight">This is some text. This is some text.</p>
</body>
</html>

4. 字母间隔

letter-spacing

word-spacing 的区别在于，字母间隔修改的是字符或字母之间的间隔。

<html>

<head>
<style type="text/css">
h1 {letter-spacing: -0.5em}
h4 {letter-spacing: 20px}
</style>
</head>

<body>
<h1>This is header 1</h1>
<h4>This is header 4</h4>
</body>

</html>

5. 文本装饰

text-decoration

none
underline
overline
line-through
blink

<html>
<head>
<style type="text/css">
h1 {text-decoration: overline}
h2 {text-decoration: line-through}
h3 {text-decoration: underline}
h4 {text-decoration:blink}
a {text-decoration: none}
</style>
</head>

<body>
<h1>这是标题 1</h1>
<h2>这是标题 2</h2>
<h3>这是标题 3</h3>
<h4>这是标题 4</h4>
<p><a href="http://www.w3school.com.cn/index.html">这是一个链接</a></p>
</body>

</html>

CSS 字体

font-size

设置字体尺寸

<html>
<head>
<style type="text/css">
h1 {font-size: 300%}
h2 {font-size: 200%}
p {font-size: 100%}
</style>
</head>

<body>
<h1>This is header 1</h1>
<h2>This is header 2</h2>
<p>This is a paragraph</p>
</body>

</html>

font

设置所有字体属性

p.ex1
  {
  font:italic arial,sans-serif;
  }

p.ex2
  {
  font:italic bold 12px/20px arial,sans-serif;  # 字体，粗细，尺寸
  }

CSS 链接

链接的特殊性在于能够根据它们所处的状态来设置它们的样式。

链接的四种状态：

a:link - 普通的、未被访问的链接
a:visited - 用户已访问的链接
a:hover - 鼠标指针位于链接的上方
a:active - 链接被点击的时刻

当为链接的不同状态设置样式时，请按照以下次序规则：

a:hover 必须位于 a:link 和 a:visited 之后
a:active 必须位于 a:hover 之后

a:link {color:#FF0000;}		/* 未被访问的链接 */
a:visited {color:#00FF00;}	/* 已被访问的链接 */
a:hover {color:#FF00FF;}	/* 鼠标指针移动到链接上 */
a:active {color:#0000FF;}	/* 正在被点击的链接 */

CSS 表格

border

table, th, td
  {
  border: 1px solid blue; # 像素，实体，颜色
  }

border-collapse

border-collapse 属性设置是否将表格边框折叠为单一边框

table
  {
  border-collapse:collapse;
  }

table,th, td
  {
  border: 1px solid black;
  }

posted @ 2018-06-04 14:50 步绍训阅读(432) 评论(0) 收藏举报

刷新页面返回顶部

步绍训

战士老步

CSS 详解

标签选择器

关联选择器

属性选择器

公告