Comments

css

css结构

1
选择器 {声明}

css选择器

  • HTML元素以id属性来设置id选择器,CSS 中 id 选择器以 “#” 来定义
  • HTML中以class属性表示, 在 CSS 中，类选择器以一个点”.”号显示
1
2
3
4
5
6
7
8
9
10
11
12
13
<style>
#para1
{
2text-align:center;
2color:red;
} 
</style>
</head>

<body>
<p id="para1">Hello World!</p>
<p>这个段落不受该样式的影响。</p>
</body>
1
2
3
4
5
6
7
8
9
10
p.center
{
2text-align:center;
}
</style>
</head>

<body>
<h1 class="center">这个标题不受影响</h1>
<p class="center">这个段落居中对齐。</p>

css插入样式表

  • 外部样式表(External style sheet)
  • 内部样式表(Internal style sheet)
  • 内联样式(Inline style)

内联样式）Inline style > （内部样式）Internal style sheet >（外部样式）External style sheet > 浏览器默认样式;如果外部样式放在内部样式的后面，则外部样式将覆盖内部样式

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
@ 对 ul 生效
ul
{
2list-style-type:none;
2padding:0px;
2margin:0px;
}

@ 对 ul 中的 li 生效
ul li
{
2background-image:url(sqpurple.gif);
2background-repeat:no-repeat;
2background-position:0px 5px; 
2padding-left:14px;
}

1
2
3
4
5
@ 同时对table, th, td 生效 (分组选择器)
table,th,td
{
2border:1px solid black;
}

CSS 盒子模型Box Model

  • Margin(外边距) - 清除边框外的区域，外边距是透明的。
  • Border(边框) - 围绕在内边距和内容外的边框。
  • Padding(内边距/填充) - 清除内容周围的区域，内边距是透明的。
  • Content(内容) - 盒子的内容，显示文本和图像。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
border-style: dotted solid double dashed;
上边框是 dotted
右边框是 solid
底边框是 double
左边框是 dashed

border-style: dotted solid double;
上边框是 dotted
左、右边框是 solid
底边框是 double

border-style: dotted solid;
上、底边框是 dotted
右、左边框是 solid

border-style: dotted;
四面边框是 dotted



@ border-style 也可以和 border-width 、 border-color 一起使用
border:5px solid red;

CSS 轮廓（outline）

  • 轮廓（outline）是绘制于元素周围的一条线，位于边框边缘的外围，可起到突出元素的作用。
  • 轮廓（outline）属性指定元素轮廓的样式、颜色和宽度。

CSS 分组 和 嵌套 选择器

  • css分组
1
2
3
4
h1,h2,p
{
    color:green;
}
  • 嵌套

p{ }: 为所有 p 元素指定一个样式。

.marked{ }: 为所有 class=”marked” 的元素指定一个样式。

.marked p{ }: 为所有 class=”marked” 元素内的 p 元素指定一个样式。

p.marked{ }: 为所有 class=”marked” 的 p 元素指定一个样式。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
p
{
    color:blue;
    text-align:center;
}
.marked
{
    background-color:red;
}
.marked p
{
    color:white;
}
p.marked{
    text-decoration:underline;
}

CSS Display(显示) 与 Visibility（可见性）

隐藏一个元素可以通过把display属性设置为”none”，或把visibility属性设置为”hidden”

visibility:hidden可以隐藏某个元素，但隐藏的元素仍需占用与未隐藏之前一样的空间。也就是说，该元素虽然被隐藏了，但仍然会影响布局。

display:none可以隐藏某个元素，且隐藏的元素不会占用任何空间。也就是说，该元素不但被隐藏了，而且该元素原本占用的空间也会从页面布局中消失。

CSS Display - 块和内联元素

块元素是一个元素，占用了全部宽度，在前后都是换行符。

块元素的例子

1
2
3
<h1>
<p>
<div>

内联元素只需要必要的宽度，不强制换行。

内联元素的例子

1
2
<span>
<a>

CSS 布局 - Overflow

CSS overflow 属性可以控制内容溢出元素框时在对应的元素区间内添加滚动条。

值描述
visible默认值。内容不会被修剪，会呈现在元素框之外。
hidden内容会被修剪，并且其余内容是不可见的。
scroll内容会被修剪，但是浏览器会显示滚动条以便查看其余的内容。
auto如果内容被修剪，则浏览器会显示滚动条以便查看其余的内容。
inherit规定应该从父元素继承 overflow 属性的值。

CSS Float(浮动)

CSS 的 Float（浮动），会使元素向左或向右移动，其周围的元素也会重新排列。

Float（浮动），往往是用于图像，但它在布局时一样非常有用。

元素的水平方向浮动，意味着元素只能左右移动而不能上下移动。

一个浮动元素会尽量向左或向右移动，直到它的外边缘碰到包含框或另一个浮动框的边框为止。

浮动元素之后的元素将围绕它。

浮动元素之前的元素将不会受到影响。

CSS 组合选择符

组合选择符说明了两个选择器直接的关系。

组合方式

  • 后代选择器(以空格分隔) ：后代选择器用于选取某元素的后代元素。
  • 子元素选择器(以大于号分隔）：只能选择作为某元素子元素的元素。
  • 相邻兄弟选择器（以加号分隔）：可选择紧接在另一元素后的元素，且二者有相同父元素。
  • 普通兄弟选择器（以破折号分隔）

CSS 伪类(Pseudo-classes)

伪类的语法：

selector:pseudo-class {property:value;}

CSS类也可以使用伪类：

selector.class:pseudo-class {property:value;}

CSS 导航栏

CSS 提示工具(Tooltip)

CSS 媒体类型

CSS 属性 选择器

具有特定属性的HTML元素样式不仅仅是class和id。

素丶素丶丶wodetian

忍一时越想越气，退一步越想越亏。