前端开发学习笔记—–CSS

一.初识

1.CSS语法

<ul> <li> a. css为层叠样式表,样式定义了HTML元素的显示方式,样式储存在样式表中,多个样式定义可层叠为一个.理解为html的一个壳. <li>b.css规则由选择器,以及一条或多条声明构成.且CSS声明以大括号 ***{}*** 包起来,以分号 ***;*** 结束.<br>如:h1,a,body..等为选择器. 每条声明由一个属性和一个值组成. </ul>

HTML

    选择器	声明 	
h1     {color:red;font-size:12px;}

<ul><li>c.css注释以 ***/**** 开始, 以 ***/** 结束. </ul>

2.CSS id和class选择器

<ul> <li>a.id选择器可以为标有特定id的HTML元素指定特定的样式. CSS中id选择器以**" # "**来定义 ,如下: <br>Tips: ID属性不要以数字开头,数字开头的ID在mozilla/Firefox 浏览器中不起作用. </ul>

HTML

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>前端开发学习笔记—–CSS</title>
	<style type="text/css">
		body {background-color: #FFFFF0;}
		h1{text-align: center;color: orange;}
		#para{text-align: left;color: green;}
	</style>
</head>
<body>
	<h1>前端开发学习笔记—–CSS</h1>
	<p id="para">para的CSS样式</p>
</body>
</html>

mark

<ul> <li>b.class选择器用于描述一组元素的样式,class选择器有别于id选择器,class可以在多个元素中使用 </ul>

HTML

p.center {text-align: center;}
....
....
<p class="center">class样式测试</p>

mark

3.CSS 插入样式表方式

<ul> <li>a.外部样式表,用于同一个样式表应用于多个页面时,可通过改变一个文件来改变整个站点的外观. <li>b.内部样式表一般放于style标签在文档头部定义 <li>c.内联样式,慎用.<br>Tips:优先级: 内联样式> 内部样式>外部样式> 浏览器默认样式 </ul>

二.渐进

1.CSS背景

背景属性用于定义HTML匀速的背景,背景属性一般有:

背景颜色 background-color 支持十六进制 ,RGB和英文颜色.
背景图片 background-image
默认情况下,background-image 属性会在页面水平或者垂直方向平铺.可设置只在水平方向平铺 (repeat-x)
背景平铺 background-repeat 可设置背景平铺方向或设置不平铺 no-repeat
背景滚动 background-attachment 背景图像是否跟着页面的其余部分滚动
背景位置 background-position 可设置背景在页面中的位置如: right top

<li>Tips:背景属性可以简写如下格式.

HTML

body {background:#ffffff url('img_tree.png') no-repeat right top;}

2.CSS文本

a.文本颜色

<ul> <li> 十六进制如:#FF0000</li> <li> RGB值如:RGB(255.0.0)</li> <li> 颜色的名称如: blue</li> ### **b.文本对齐方式** <ul> <li>文本排列属性时用来设置文本的水平对齐方式,文本可居中(center)或对齐到(left)左或(right)右和(justify)两端对齐</li> <li>当<b>text-align</b>被设置为justify 时,每一行杯展开为宽度相等,左右外边距时对齐的(如杂志和报纸)</li> </ul>

c.文本修饰

<ul> <li><b>text-decoration</b> 属性用来设置或删除文本的装饰</li> </ul>

HTML

h1 {text-decoration:overline;}
h2 {text-decoration:line-through;}
h3 {text-decoration:underline;}

mark

d.文本转换

<ul> <li><b>text-transform</b> 文本转换时用来指定在一个文本中的大写和小写字母 <li><b>uppercase</b> 全部变成大写字母 <li><b>lowercae</b> 全部变成小写字母 <li><b>capitalize</b> 每个单词的首字母大写 </ul>

e.文本缩进

<ul> <li><b>text-indent:</b>50px 文本缩进50个像素 </ul>

3.CSS 字体

CSS字体属性定义字体,加粗,大小,文字样式.

a.CSS字型

<ul> <li><b>通用字体系列</b>-拥有相似外观的字体系统组合 (如:"Serif" 或"Monospace") <li><b>特定字体系列</b>-一个特定的字体系列(如:"Times"或"Courier")</li> </ul>

b.字体系列

<ul> <li><b>font-family</b>属性设置文本的字体系列</li><b>font-family</b>属性应该设置多个字体名称,这样如果浏览器不支持第一种字体,他将尝试下一种字体.<br><b>Tips:</b>如果字体名称超过一个字,必须使用引号,如 Font-family:"黑体". </ul>

c.字体样式

<ul> <li>字体样式主要用于指定斜体文字的字体样式属性( <b>font-style:...</b>)</li> <li><b>normal</b> 正常显示文本</li> <li><b>italic</b> 以斜体显示文字</li> <li><b>oblique</b> 文字向一边倾斜,与斜体类似,但不太支持 </ul>

d.字体大小

<ul> <li><b>font-size</b>属性设置文本的大小.如果不指定一个字体的大小,默认大小和普通文本段落一样, 为 <b>16像素</b> (16px=1em) <ul> <li><b>font-size:16px</b>来设置文本大小像素</li> <li><b>font-size:1.5em</b>用em来设置文本字体大小<b>(em=px/16)</b></li> </ul> <li>绝对大小 <ul> <li>设置一个指定大小的文本</li> <li>不允许用户在所有浏览器中改变文本大小</li> <li>确定了输出的物理尺寸时绝对大小很有用</li> </ul> <li>相对大小</li> <ul> <li>相对周围元素来设置大小</li> <li>允许用户在浏览器中改变文字大小</li> </ul> <li>使用百分比和rm组合</li> <ul> <li>在所有浏览器中，可以显示相同的文本大小，并允许所有浏览器缩放文本的大小。 </li> </ul> </ul>

4.CSS链接

<ul> <li><b>链接的样式</b>可以使用任何CSS属性(如:颜色,字体,背景等). <li>特别的链接,可以有不同的样式,取决于他们是声明状态.</li> <ul> <li><b>a:link</b> -未访问过的链接</li> <li><b>a:visited</b> -用户已访问过的链接</li> <li><b>a:hover</b> -当用户鼠标放在链接上时</li> <li><b>a:active</b> -链接被点击的那一刻</li> </ul> <li><b>Tips:</b></li> <ul> <li>a:hover 必须跟在 a:link 和 a:visited后面 </li> <li>a:active 必须跟在 a:hover后面 </li> <li><b>text-decortion:none</b>属性主要用于删除链接中的下划线</li> </ul> </ul>

5.CSS列表

a.列表属性作用

<ul> <li>为有序列表设置不同的列表项标记</li> <li>为无序列表设置不同的列表项标记</li> <li>可设置图像为列表项标记</li> </ul>

b.列表类型

<ol list-style:upper-roman;> <li><b>无序列表 </b>- 列表想标记用特殊图形,如小黑点,小方框等</li> <li><b>有序列表 </b>- 列表项的标记有数字或字母</li> </ol>

c.不同的列表项标记

<ul> <li><b>list-style-type</b> 属性指定列表项标记类型:</li> <ol>如: <li>ul {list-style-type: circle;}<br> ul {list-style-type: square;} </li> <li>ol {list-style-type: upper-roman;}<br> ol {list-style-type: lower-alpha;}</li> </ol> <li><b>list-style-image: url('')</b> 作为列表项标记的图像</li> <li>简写属性 list-style </li> <ul>如: <li>list-style: square url("sqpurple.gif");</li> </ul> </ul>

6.CSS表格

a.表格边框

CSS

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

指定了表格Th和td元素的黑色边框,但是表格拥有双边框

CSS

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

折叠边框,只显示单个边框

b.表格宽高

width和height属性定义表格的宽度和高度
CSS
```
table {width:100%;}
th {height:50px;}
```
以上例子是设置100%的宽度,50像素的th元素的高度的表格

c.表格文字对齐

<ul> <li>水平对齐 <b>text-align</b> right left 或center</li> <li>垂直对齐 <b>vertical-align:</b> bottom center ..</li> </ul>

d.表格填充

在表的内容中控制空格之间的边框

e.表格颜色

CSS

table, td, th
{
    border:1px solid green;
}
th
{
    background-color:green;
    color:white;
}

上例指定边框颜色,和th元素的文本和背景色

7.盒子模型

mark

说明:

<ul> <li><b>Margin(外边框)</b> - 清除边框外的区域,外边距是透明的.</li> <li><b>Border(边框)</b> - 围绕在内边距和内容外的边框.</li> <li><b>Padding(内边距)</b> - 清楚内容周围的区域,内边距是透明的</li> <li><b>Content(内容)</b> - 盒子的内容,显示文本和图像</li> </ul>

a.CSS边框 ( border)

CSS边框属性

mark

边框样式 border-style
边框单独设置各边

CSS

p
{
    border-top-style:dotted;
    border-right-style:solid;
    border-bottom-style:dotted;
    border-left-style:solid;
}

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一起使用。

b.CSS轮廓 outline

轮廓是绘制于元素周围的一条线,位于边框外元的外围,可齐到突出元素的作用. CSS outline 属性规定元素轮廓的样式,颜色和宽度

c.CSS外边距 margin

margin 清楚周围(外边框)元素区域.mrgin 没有背景颜色,是完全透明的
margin 可以单独改变元素的上下左右边距,也可以一次改变所有的属性

d.CSS填充 padding

当元素 padding 内边距被清楚是,所释放的区域将会受到元素背景颜色的填充. 单独使用是padding 属性可以改变上下左右的填充.

8.CSS Display(显示) 与 Visibility (可见性)

display 属性设置一个元素如何显示, Visibility 属性指定一个元素课间还是隐藏

a.隐藏元素 - display:none 或 visibility: hidden

使用 visibility:hidden 虽可以隐藏某个元素,但是隐藏的元素仍需要占用与未隐藏之前一样的空间.也就是说,该元素虽然被隐藏了,担任会影响布局.
使用 display:none可以隐藏某个元素,且隐藏的元素不会占用任何空间.也就是说,该元素不但被隐藏了,而且该元素原本占用的空间也会从页面布局中消失.

b.CSS Display - 块和内联元素

块元素是一个元素,占用了全部宽度,在前后都是换行符. 如: <b>< h1></b> < p> < div>
内联元素只需要必要的宽度,不强制换行.如: < span> < a>

c.改变一个元素的显示

可以更改内联元素和块元素,反之亦然.可以是页面看起来是一种特定的组合,并仍然遵循web标准.
如:把列表项显示为内联元素:
CSS
```
li {display:inline;}
```
如:把span元素作为块元素:
CSS
```
span {display:block;}
```

9.CSS Position(定位)

position 属性制定了元素的定位类型,position 属性的五个值:
- static
- relative
- fixed
- absolute
- sticky
元素可以使用顶部,底部,左侧和右侧属性定位.然而,这些属性无法完成工作,除非是设定position 属性.他们也有不同的工作方式,这取决于定位方法.

a.static 定位

HTML元素的默认值,即没有定位,遵循正常的文档对象,静态定位的元素不会受到top,bottom,left,right 影响

b.fixed 定位

fixed定位元素的位置相对于浏览器窗口时固定位置.即使窗口是滚动的它也不会移动.

CSS

p.pos_fixed
{
    position:fixed;
    top:30px;        距离顶部30px
    right:5px;
}

Tips:fixed定位使元素的位置与文档流无关,因此不占据空间.且fixed定位的元素和其他元素重叠

c.relative 定位

相对定位元素的定位是相对其正常位置.

h2.pos_left
{
    position:relative;
    left:-20px;
}
h2.pos_right
{
    position:relative;
    left:20px;
}

移动相对定位元素,但它原本所占的空间不会改变,相对定位元素进常被用来作为绝对定位元素的容器块.

d.absolute 定位

绝对定位的元素的位置相对于最近的已定位父元素,如果元素没有已定位父元素,那么它的位置相对于 < html>
- 用绝对定位,一个元素可以放在页面上的任何位置。标题下面放置距离左边的页面100 px和距离页面的顶部150 px的元素。.

CSS

    h2
    {
    	position:absolute;
    	left:100px;
    	top:150px;
    }

absolute定位使元素的位置与文档流无关,一次不占据空间.absolute定位的元素和其他元素重叠.

e.sticky 定位

sticky引文字面意思是粘贴,所以可以把它称之为粘性定位.,sticky定位级域用户的滚动位置来定位.
粘性定位的元素是依赖于用户的滚动，在 position:relative 与 position:fixed 定位之间切换。它的行为就像 position:relative; 而当页面滚动超出目标区域时，它的表现就像 position:fixed;，它会固定在目标位置。元素定位表现为在跨越特定阈值前为相对定位，之后为固定定位。这个特定阈值指的是 top, right, bottom 或 left 之一，换言之，指定 top, right, bottom 或 left 四个阈值其中之一，才可使粘性定位生效。否则其行为与相对定位相同。

CSS

div.sticky {
    position: -webkit-sticky; /* Safari */
    position: sticky;
    top: 0;
    background-color: green;
    border: 2px solid #4CAF50;
}

mark

f.重叠的元素

元素的定位与文档流无关,所以他们可以覆盖页面上的其他元素.
z-index属性制定了一个元素的堆叠顺序(哪个元素应该在前,或在后面).一个元素可以有正数或负数的堆叠顺序,具有更高堆叠顺序的元素总是在较低的堆叠顺序元素的前面

Tips: 如果两个定位元素,没有指定z-index ,最后定位在HTML代码中的元素将被显示在最前面.

10.CSS Overflow (布局)

overflow属性用于控制内容溢出元素框时的显示方式.
overflow属性有以下值
- visible - 默认值.内容不会被修剪,会呈现在元素狂之外.溢出!
- hidden - 内容会被修剪,且其余内容是不可见的.
- scroll - 内容会被修剪,但是浏览器会显示滚动条一边查看其余内容.
- auto - 如果内容被修剪,则浏览器会显示滚动条以便查看其余内容.
- inherit - 规定应该从父元素继承overflow属性的值
overflow 属性之工作与指定高度的块元素上.
默认情况下overflow值为visible.

11.CSS Float(浮动)

CSS 的 Float（浮动），会使元素向左或向右移动，其周围的元素也会重新排列。Float（浮动），往往是用于图像，但它在布局时一样非常有用。

a.元素怎样浮动

元素的水平方向浮动，意味着元素只能左右移动而不能上下移动。一个浮动元素会尽量向左或向右移动，直到它的外边缘碰到包含框或另一个浮动框的边框为止。浮动元素之后的元素将围绕它。浮动元素之前的元素将不会受到影响。
如果图像是右浮动,下面的文本流将环绕在它左边:

CSS

img
{
    float:right;
}

b.彼此相邻的浮动元素

如果把几个浮动的元素放到一起,如果有空间的话,他们会彼此相邻.

c.清除浮动- clear,指定不允许元素周围有浮动.

元素浮动之后，周围的元素会重新排列，为了避免这种情况，使用 clear 属性。clear 属性指定元素两侧不能出现浮动元素
使用 clear 属性往文本中添加图片廊

CSS

  .text_line
  {
      clear:both;
  }

12.CSS对齐 -水平&垂直对齐

a.元素居中对齐

要水平居中对齐一个元素可以使用 margin:auto;,设置到元素的宽度将防止它移除到容器的边缘.元素通过指定宽度,并将两边的空外边距平均分配.

CSS

  .center {
      margin: auto;
      width: 50%;
      border: 3px solid green;
      padding: 10px;
  }

Tips:如果没有设置width属性(或者设置100%),则居中对齐将不起作用.

b.文本居中对齐

如果仅仅是为了文本在元素内居中对齐,可以使用text-align:center;

CSS

  .center {
      text-align: center;
      border: 3px solid green;
  }

c.图片居中对齐

要让图片居中对齐,可以使用 margin:auto; 并将它放到块元素中.

CSS

  img {
      display: block;
      margin: auto;
      width: 40%;
  }

d.左右对齐 - 使用定位方式

可以使用 **position:absolute;**属性来对齐元素.

CSS

  .right {
      position: absolute;
      right: 0px;
      width: 300px;
      border: 3px solid #73AD21;
      padding: 10px;
  }

Tips:绝对定位元素会被从正常流中删除,并且能够交叠元素.

提示:

当使用 position 来对齐元素时, 通常元素会设置 margin 和 padding 。这样可以避免在不同的浏览器中出现可见的差异。当使用 position 属性时，IE8 以及更早的版本存在一个问题。如果容器元素（在我们的案例中是 < div class="container">）设置了指定的宽度，并且省略了 !DOCTYPE 声明，那么 IE8 以及更早的版本会在右侧增加 17px 的外边距。这似乎是为滚动条预留的空间。当使用 position 属性时，请始终设置 ! DOCTYPE 声明：

e.左右对齐 - 使用浮动方式

对 **< body>**元素的外边距和内边距进行预定义可以避免在不同的浏览器中出现可见的差异.

CSS

.right {
    float: right;
    width: 300px;
    border: 3px solid #73AD21;
    padding: 10px;
}

注意: 如果子元素的高度大于父元素,且子元素设置了浮动,那么子元素将移除,这时候可以使用 clearfix来清楚浮动来解决改问题.

CSS

.clearfix {
    overflow: auto;
}

mark

f.垂直居中对齐 - 使用padding

CSS 中有很多可以实现垂直居中对齐,一个简单的方式就是头部顶部使用 padding.
CSS
```
.center {
    padding: 70px 0;
    border: 3px solid green;
}
```

g.垂直居中 - 使用 line-height

CSS

.center {
    line-height: 200px;
    height: 200px;
    border: 3px solid green;
    text-align: center;
}
 
/* 如果文本有多行，添加以下代码: */
.center p {
    line-height: 1.5;
    display: inline-block;
    vertical-align: middle;
}

mark

h.垂直居中 - 使用position和transform

CSS

.center { 
    height: 200px;
    position: relative;
    border: 3px solid green; 
}
 
.center p {
    margin: 0;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

三.深入

1.CSS组合选择符

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

a.后代选择器(以空格连接)

后代选择器用于选取某元素的后代元素.
以下实例选取所有 < p> 元素插入到 < div> 元素中:

CSS

  div p
  {
    background-color:yellow;
  }

b.子元素选择器(以大于号连接)

与后代选择器相比,子元素选择器只能选择作为某元素子元素的元素.
以下实例选择了**< div>元素中所有直接**子元素 < p> ：

CSS

  div>p
  {
    background-color:yellow;
  }

c.相邻兄弟选择器(以加号连接)

相邻兄弟选择器可选择紧接在林一个元素后的元素,且二者具有相同的父元素
以下实例选取了所有位于 < div> 元素后的第一个 < p> 元素:

CSS

  div+p
  {
    background-color:yellow;
  }

d.后续兄弟选择器(以~连接)

后续兄弟选择器选去所有指定元素之后的相邻兄弟元素.
以下实例选取了所有 < div> 元素之后的所有相邻兄弟元素 < p> :

CSS

  div~p
  {
    background-color:yellow;
  }

2.伪类

CSS伪类是用来添加一些选择器的特殊效果

a.anchor伪类

在支持CSS的浏览器中,连接的不同状态都可以以不同的方式显示

CSS

  a:link {color:#FF0000;} /* 未访问的链接 */
  a:visited {color:#00FF00;} /* 已访问的链接 */
  a:hover {color:#FF00FF;} /* 鼠标划过链接 */
  a:active {color:#0000FF;} /* 已选中的链接 */

在CSS的定义中, a:hover 必须被放置于 a:link 和a:visited 之后,并且a:active 必须被置于 a:hover 之后才是有效的.
伪类的名称不区分大小写.

b.伪类和css类

伪类可以与CSS类配合使用

CSS

  a.red:visited {color:#FF0000;}
  <a class="red" href="css-syntax.html">CSS 语法</a>

如果在上面的例子的连接已被访问,它会显示为红色.

c.CSS:first-child伪类

可以使用 :first-child 伪类来选择父元素的第一个子元素.
在下面的例子中,选择器作为任何元素的第一个子元素的**< p>** 元素.

CSS

  p:first-child
  {
      color:blue;
  }

d. CSS- :lang 伪类

:lang 伪类是你有能力为不同的语言定义特殊的规则
在下面例子中, : lang类为属性值为no的q元素定义引号的类型:

CSS

  q:lang(no) {quotes: "~" "~";}

3.CSS伪元素

a.:first-line 伪元素

first-line 为元素用于像文本的首行设置特殊样式.
在下面的例子中,浏览器会根据 first-line 为元素的样式对p 元素的第一行文本进行格式化

CSS

  p:first-line 
  {
      color:#ff0000;
      font-variant:small-caps;
  }

注意: first-line* 为元素只能用于块级元素.
注意: 下面的属性可以用于 first-line 为元素:
- font properties
- color properties
- background properties
- word-spacing
- letter-spacing
- text-decoration
- vertical-align
- text-transform
- line-height
- clear

b.first-letter 伪元素

"first-l etter" 伪元素用于向文本的首字母设置特殊样式：

CSS

  p:first-letter 
  {
      color:#ff0000;
      font-size:xx-large;
  }

注意: first-letter 伪元素只能用于块级元素
注意: 下面的属性可应用于 first-letter 伪元素
- font properties
- color properties
- background properties
- margin properties
- padding properties
- border properties
- text-decoration
- vertical-align (only if "float" is "none")
- text-transform
- line-height
- float
- clear

c.伪元素和CSS类

伪元素可以结合CSS类

CSS

  p.article:first-letter {color:#ff0000;}
  <p class="article">文章段落</p>

上面的例子会使所有 class 为 article 的段落的首字母变为红色。
多个伪元素
- 可以结合多个伪元素来使用.
- 在下面的例子中，段落的第一个字母将显示为红色，其字体大小为 xx-large。第一行中的其余文本将为蓝色，并以小型大写字母显示。
  
  段落中的其余文本将以默认字体大小和颜色来显示：
  CSS
```
p:first-letter
{
    color:#ff0000;
    font-size:xx-large;
}
p:first-line 
{
    color:#0000ff;
    font-variant:small-caps;
}
```

d. CSS-:before 伪元素

before 伪元素可以在元素的内容前面插入新内容

e.CSS-: after 伪元素

after 伪元素可以在元素的内容后插入新内容

4.CSS 导航栏

a.基本的垂直导航栏

导航栏=链接列表

CSS

<ul>
  <li><a href="#home">主页</a></li>
  <li><a href="#news">新闻</a></li>
  <li><a href="#contact">联系</a></li>
  <li><a href="#about">关于</a></li>
</ul>

一个简单的连接列表使用 list-style-type:none 可移除列表项标,导航栏不需要列表项标记

CSS

ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    width: 200px;
    background-color: #f1f1f1;
}
li a {
    display: block;
    color: #000;
    padding: 8px 16px;
    text-decoration: none;
}
/* 鼠标移动到选项上修改背景颜色 */
li a:hover {
    background-color: #555;
    color: white;
}
</style>
</head>
<body>
<ul>
<li><a href="#home">主页</a></li>
<li><a href="#news">新闻</a></li>
<li><a href="#contact">联系</a></li>
<li><a href="#about">关于</a></li>
</ul>

mark

在点击了选项后，我们可以添加 "active" 类来标准哪个选项被选中：

b.全屏高度的固定导航栏

CSS

ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    width: 25%;
    background-color: #f1f1f1;
    height: 100%; /* 全屏高度 */
    position: fixed; 
    overflow: auto; /* 如果导航栏选项多，允许滚动 */
}

c.水平导航栏

水平导航栏可以使用内联或浮动来实现

如果想要连接具有相同的大小,必须使用浮动的方法

浮动列表项

CSS

li
{
    float:left;
}
a
{
    display:block;
    width:60px;
}

实例解析：
- float:left - 使用浮动块元素的幻灯片彼此相邻
- display:block - 显示块元素的链接，让整体变为可点击链接区域（不只是文本），它允许我们指定宽度
- width:60px - 块元素默认情况下是最大宽度。我们要指定一个60像素的宽度

d.添加分割线

CSS

/* 除了最后一个选项(last-child) 其他的都添加分割线 */
li {
    border-right: 1px solid #bbb;
}
li:last-child {
    border-right: none;
}

e.固定导航条

CSS

ul {
    position: fixed;
    top: 0;
    width: 100%;
}

可以设置固定在头部或底部 top bottom

5.下拉菜单

使用CSS创建一个鼠标移动上去后显示下拉菜单的效果

<!DOCTYPE html> <html> <head> <style> .dropdown { position: relative; display: inline-block; } .dropdown-content { display: none; position: absolute; background-color: #f9f9f9; min-width: 160px; box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2); padding: 12px 16px; z-index: 1;} .dropdown:hover .dropdown-content { display: block; } </style> </head> <body> <div class="dropdown"> <span><b>鼠标移动到这!</b></span> <div class="dropdown-content"> <p>Hello World!</p> <p> 这就是下拉菜单! </p> </div> </div> <body> </html>

CSS

<!DOCTYPE html>
<html>
<head>
<style>
.dropdown {   
    position: relative;    
    display: inline-block;
    }
.dropdown-content {    
    display: none;    
    position: absolute;    
    background-color: #f9f9f9;    
    min-width: 160px;    
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);    
    padding: 12px 16px;    
    z-index: 1;
    a:hover{background-color:#f1f1f1}
}
.dropdown:hover .dropdown-content {    
    display: block;
    }
</style>
</head>
<body>
<div class="dropdown">
  <span>鼠标移动到这!</span>
  <div class="dropdown-content">
    <p>Hello World!</p>
  </div>
</div>
<body>
</html>

实例解析:

HTML 部分：

我们可以使用任何的 HTML 元素来打开下拉菜单，如：< span>, 或 a < button> 元素。

使用容器元素 (如： < div>) 来创建下拉菜单的内容，并放在任何你想放的位置上。

使用 < div> 元素来包裹这些元素，并使用 CSS 来设置下拉内容的样式。
CSS 部分：

.dropdown 类使用 position:relative, 这将设置下拉菜单的内容放置在下拉按钮 (使用 position:absolute) 的右下角位置。

.dropdown-content 类中是实际的下拉菜单。默认是隐藏的，在鼠标移动到指定元素后会显示。注意 min-width 的值设置为 160px。你可以随意修改它。 注意: 如果你想设置下拉内容与下拉按钮的宽度一致，可设置 width 为 100% ( overflow:auto 设置可以在小尺寸屏幕上滚动)。

我们使用 box-shadow 属性让下拉菜单看起来像一个"卡片"。

:hover 选择器用于在用户将鼠标移动到下拉按钮上时显示下拉菜单。

6.CSS提示工具

CSS

<!DOCTYPE html>
    <html>
        <head>
<meta charset="utf-8">
<title>提示工具</title>
</head>
<style>
.tooltip {
    position: relative;
    display: inline-block;
    border-bottom: 1px dotted black;
}.tooltip .tooltiptext {
    visibility: hidden;
    width: 120px;
    background-color: black;
    color: #fff;
    text-align: left;
    border-radius: 6px;
    padding: 5px 0;
    /* 定位 */
position: absolute;
    z-index: 1;}
    .tooltip:hover .tooltiptext {
    visibility: visible;
}
    </style>
<body style="text-align:center;">
<div class="tooltip">鼠标移动到这
  <span class="tooltiptext">提示文本</span>
</div>
</body>        
</html>
</!doctype>

实例解析:

HTML) 使用容器元素 (like < div>) 并添加 "tooltip" 类。在鼠标移动到 < div> 上时显示提示信息。

提示文本放在内联元素上(如 < span>) 并使用class="tooltiptext"。
**CSS)**tooltip 类使用 position:relative, 提示文本需要设置定位值 position:absolute。 注意: 接下来的实例会显示更多的定位效果。

tooltiptext 类用于实际的提示文本。模式是隐藏的，在鼠标移动到元素显示。设置了一些宽度、背景色、字体色等样式。

CSS3 border-radius 属性用于为提示框添加圆角。

:hover 选择器用于在鼠标移动到到指定元素 < div> 上时显示的提示。

a.定位提示工具

显示在右侧:

CSS

.tooltip .tooltiptext {
    top: -5px;
    left: 105%; 
}

mark

显示在左侧

CSS

.tooltip .tooltiptext {
    top: -5px;
    right: 105%; 
}

如果你想要提示工具显示在头部和底部。我们需要使用 margin-left 属性，并设置为 -60px。这个数字计算来源是使用宽度的一半来居中对齐，即： width/2 (120/2 = 60)。

CSS

.tooltip .tooltiptext {
    width: 120px;
    bottom: 100%; 		或者 top:100%
    left: 50%; 
    margin-left: -60px; /* 使用一半宽度 (120/2 = 60) 来居中提示工具 */
}

7.CSS图片廊

CSS

<div class="responsive">
  <div class="img">
    <a target="_blank" href="http://static.runoob.com/images/demo/demo1.jpg">
      <img src="http://static.runoob.com/images/demo/demo1.jpg" alt="图片文本描述" width="300" height="200">
    </a>
    <div class="desc">这里添加图片文本描述</div>
  </div>
</div>
 
<div class="responsive">
  <div class="img">
    <a target="_blank" href="http://static.runoob.com/images/demo/demo2.jpg">
      <img src="http://static.runoob.com/images/demo/demo2.jpg" alt="图片文本描述" width="300" height="200">
    </a>
    <div class="desc">这里添加图片文本描述</div>
  </div>
</div>
 
<div class="responsive">
  <div class="img">
    <a target="_blank" href="http://static.runoob.com/images/demo/demo3.jpg">
      <img src="http://static.runoob.com/images/demo/demo3.jpg" alt="图片文本描述" width="300" height="200">
    </a>
    <div class="desc">这里添加图片文本描述</div>
  </div>
</div>
 
<div class="responsive">
  <div class="img">
    <a target="_blank" href="http://static.runoob.com/images/demo/demo4.jpg">
      <img src="http://static.runoob.com/images/demo/demo4.jpg" alt="图片文本描述" width="300" height="200">
    </a>
    <div class="desc">这里添加图片文本描述</div>
  </div>
</div>

8.CSS图像透明/不透明

CSS

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
div.background
{
  width:500px;
  height:250px;
  background:url(https://www.runoob.com/images/klematis.jpg) repeat;
  border:2px solid black;
}
div.transbox
{
  width:400px;
  height:180px;
  margin:30px 50px;
  background-color:#ffffff;
  border:1px solid black;
  opacity:0.6;
  filter:alpha(opacity=60); /* IE8 及更早版本 */
}
div.transbox p
{
  margin:30px 40px;
  font-weight:bold;
  color:#000000;
}
</style>
</head>
 
<body>
 
<div class="background">
<div class="transbox">
<p>这些文本在透明框里。这些文本在透明框里。这些文本在透明框里。这些文本在透明框里。这些文本在透明框里。这些文本在透明框里。这些文本在透明框里。这些文本在透明框里。这些文本在透明框里。这些文本在透明框里。这些文本在透明框里。这些文本在透明框里。这些文本在透明框里。
</p>
</div>
</div>
 
</body>
</html>

mark

9.CSS图像拼合技术

图像拼合就是单个图像的集合。

有许多图像的网页可能需要很长的时间来加载和生成多个服务器的请求。

使用图像拼合会降低服务器的请求数量，并节省带宽。

CSS

img.home
{
width:46px;
height:44px;
background:url(img_navsprites.gif) 0 0;
}

实例解析:

< img class="home" src="img_trans.gif" /> -因为不能为空,src属性只定义了一个小的透明图像。显示的图像将是我们在CSS中指定的背景图像
宽度：46px;高度：44px; - 定义我们使用的那部分图像
background:url(img_navsprites.gif) 0 0; - 定义背景图像和它的位置（左0px，顶部0px）

10.CSS媒体类型

媒体类型允许你指定文件将如何在不同媒体呈现。该文件可以以不同的方式显示在屏幕上，在纸张上，或听觉浏览器等等。

a.媒体类型

一些 CSS 属性只设计了某些媒体。例如 voice-family 属性是专为听觉用户代理。其他一些属性可用于不同的媒体类型。例如， font-size 属性可用于屏幕和印刷媒体，但有不同的值。屏幕和纸上的文件不同，通常需要一个更大的字体，sans-serif 字体比较适合在屏幕上阅读，而 serif 字体更容易在纸上阅读。

b.@media 类型

@media 规则允许在相同样式表为不同媒体设置不同的样式。

在下面的例子告诉我们浏览器屏幕上显示一个 14 像素的 Verdana 字体样式。但是如果页面打印，将是 10 个像素的 Times 字体。请注意，font-weight 在屏幕上和纸上设置为粗体：

实例:

CSS

@media screen
{
    p.test {font-family:verdana,sans-serif;font-size:14px;}
}
@media print
{
    p.test {font-family:times,serif;font-size:10px;}
}
@media screen,print
{
    p.test {font-weight:bold;}
}

all	用于所有的媒体设备。
aural	用于语音和音频合成器。
braille	用于盲人用点字法触觉回馈设备。
embossed	用于分页的盲人用点字法打印机。
handheld	用于小的手持的设备。
print	用于打印机。
projection	用于方案展示，比如幻灯片。
screen	用于电脑显示器。
tty	用于使用固定密度字母栅格的媒体，比如电传打字机和终端。
tv	用于电视机类型的设备。

11.CSS属性选择器

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

a.属性选择器

下面的例子是把包含标题的所有元素变为蓝色:

CSS

[title]
{
    color:blue;
}

mark

b.属性和值选择器

下面的实例改变了标题title='blog'元素的边框样式:

CSS

[title=blog]
{
	border:5px solid green;
}

CSS

<h2>将适用:</h2>
<br>
<a title="blog" href="//blog.fangmingxuan.com/">blog</a>
<hr>
<h2>将不适用:</h2>
<p title="greeting">Hi!</p>
<a class="blog" href="//blog.fangmingxuan.com/">blog</a>

mark

c.属性和值的选择器 - 多值

使用~=或|=连接

d.表单样式

属性选择器样式无需使用class或id的形式:

CSS

input[type="text"]
{
	width:150px;
	display:block;
	margin-bottom:10px;
	background-color:yellow;
}
input[type="button"]
{
	width:120px;
	margin-left:35px;
	display:block;
}

CSS

<form name="input" action="demo-form.php" method="get">
Firstname:<input type="text" name="fname" value="Peter" size="20">
Lastname:<input type="text" name="lname" value="Griffin" size="20">
<input type="button" value="Example Button">

mark

12.CSS表单

使用CSS来渲染HTML的表单元素:

CSS

input[type=text], select {
  width: 100%;
  padding: 12px 20px;
  margin: 8px 0;
  display: inline-block;
  border: 1px solid #ccc;
  border-radius: 4px;
  box-sizing: border-box;
}
 
input[type=submit] {
  width: 100%;
  background-color: #4CAF50;
  color: white;
  padding: 14px 20px;
  margin: 8px 0;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}
 
input[type=submit]:hover {
  background-color: #45a049;
}
 
div {
  border-radius: 5px;
  background-color: #f2f2f2;
  padding: 20px;
}

mark

a.输入框(input)样式

使用sidth 属性来设置输入框的宽度:

CSS

input {
  width: 100%;
}

以上实例中设置了所有 <input> 元素的宽度为 100%，如果你只想设置指定类型的输入框可以使用以下属性选择器：
- input[type=text] - 选取文本输入框
- input[type=password] - 选择密码的输入框
- input[type=number] - 选择数字的输入框
- ...

b.输入框填充

使用padding 属性可以在输入框中添加内边距.

CSS

input[type=text] {
  width: 100%;
  padding: 12px 20px;
  margin: 8px 0;
  box-sizing: border-box;
}

注意我们设置了 box-sizing 属性为 border-box。这样可以确保浏览器呈现出带有指定宽度和高度的输入框是把边框和内边距一起计算进去的。

c.输入框(input)边框

使用 border 属性可以修改 input 边框的大小或颜色，使用 border-radius 属性可以给 input 添加圆角：
CSS
```
input[type=text] {
  border: 2px solid red;
  border-radius: 4px;
}
```

d.输入框(input)颜色

可以使用 background-color 属性来设置输入框的背景颜色，color 属性用于修改文本颜色：

CSS

input[type=text] {
  background-color: #3CBC8D;
  color: white;
}

e.输入框(input)聚焦

默认情况下，一些浏览器在输入框获取焦点时（点击输入框）会有一个蓝色轮廓。我们可以设置 input 样式为 outline: none; 来忽略该效果。

使用 :focus 选择器可以设置输入框在获取焦点时的样式：
CSS
```
input[type=text]:focus {
  background-color: lightblue;
}
```

f.输入框(input)图标

如果你想在输入框中添加图标，可以使用 background-image 属性和用于定位的background-position 属性。注意设置图标的左边距，让图标有一定的空间：

CSS

input[type=text] {
  background-color: white;
  background-image: url('searchicon.png');
  background-position: 10px 10px; 
  background-repeat: no-repeat;
  padding-left: 40px;
}

g.带动画的搜索框

以下实例使用了 CSS transition 属性，该属性设置了输入框在获取焦点时会向右延展。你可以在 CSS 动画章节查看更多内容。

CSS

input[type=text] {
  -webkit-transition: width 0.4s ease-in-out;
  transition: width 0.4s ease-in-out;
}
 
input[type=text]:focus {
  width: 100%;
}

h.文本框(text area)样式

注意: 使用 resize 属性来禁用文本框可以重置大小的功能（一般拖动右下角可以重置大小）。

CSS

textarea {
  width: 100%;
  height: 150px;
  padding: 12px 20px;
  box-sizing: border-box;
  border: 2px solid #ccc;
  border-radius: 4px;
  background-color: #f8f8f8;
  resize: none;
}

i.下拉菜单(select)样式

CSS

select {
  width: 100%;
  padding: 16px 20px;
  border: none;
  border-radius: 4px;
  background-color: #f1f1f1;
}

mark

j.按钮样式

CSS

input[type=button], input[type=submit], input[type=reset] {
  background-color: #4CAF50;
  border: none;
  color: white;
  padding: 16px 32px;
  text-decoration: none;
  margin: 4px 2px;
  cursor: pointer;
}
 
/* 提示: 使用 width: 100% 设置全宽按钮 */

mark

k.响应式表单

响应式表单可以根据浏览器窗口的大小重新布局各个元素，我们可以通过重置浏览器窗口大小来查看效果：

高级: 以下实例使用了CSS3 多媒体查询来创建一个响应式表单。

CSS

* {
  box-sizing: border-box;
}
 
input[type=text], select, textarea {
  width: 100%;
  padding: 12px;
  border: 1px solid #ccc;
  border-radius: 4px;
  resize: vertical;
}
 
label {
  padding: 12px 12px 12px 0;
  display: inline-block;
}
 
input[type=submit] {
  background-color: #4CAF50;
  color: white;
  padding: 12px 20px;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  float: right;
}
 
input[type=submit]:hover {
  background-color: #45a049;
}
 
.container {
  border-radius: 5px;
  background-color: #f2f2f2;
  padding: 20px;
}
 
.col-25 {
  float: left;
  width: 25%;
  margin-top: 6px;
}
 
.col-75 {
  float: left;
  width: 75%;
  margin-top: 6px;
}
 
/* 清除浮动 */
.row:after {
  content: "";
  display: table;
  clear: both;
}
 
/* 响应式布局 layout - 在屏幕宽度小于 600px 时， 设置为上下堆叠元素 */
@media screen and (max-width: 600px) {
  .col-25, .col-75, input[type=submit] {
    width: 100%;
    margin-top: 0;
  }
}

13.CSS 计数器

CSS计数器通过一个变量来设置,根据规则递增变量.

a.使用计数器自动编号

CSS 计数器使用到以下几个属性:
- counter-reset - 创建或者重置计数器
- counter-increment - 递增变量
- content - 插入生成的内容
- counter() 或 counters() 函数 - 将计数器的值添加到元素
要使用 CSS 计数器，得先用 counter-reset 创建：
以下实例在页面创建一个计数器 (在 body 选择器中)，每个 <h 2> 元素的计数值都会递增，并在每个 < h2> 元素前添加 "Section <计数值>:"

CSS

body {
  counter-reset: section;
}
 
h2::before {
  counter-increment: section;
  content: "Section " counter(section) ": ";
}

b.嵌套计数器

以下实例在页面创建一个计数器，在每一个 < h1> 元素前添加计数值 "Section <主标题计数值>.", 嵌套的计数值则放在 < h2> 元素的前面，内容为 "<主标题计数值>.<副标题计数值>":

CSS

body {
  counter-reset: section;
}
 
h1 {
  counter-reset: subsection;
}
 
h1::before {
  counter-increment: section;
  content: "Section " counter(section) ". ";
}
 
h2::before {
  counter-increment: subsection;
  content: counter(section) "." counter(subsection) " ";
}

属性	描述
content	使用 ::before 和 ::after 伪元素来插入自动生成的内容
counter-increment	递增一个或多个值
counter-reset	创建或重置一个或多个计数器

14.CSS网页布局

网页布局有很多种方式，一般分为以下几个部分：头部区域、菜单导航区域、内容区域、底部区域。

mark

a.头部区域

头部区域位于整个网页的顶部，一般用于设置网页的标题或者网页的 logo：

CSS

.header {
  background-color: #F1F1F1;
  text-align: center;
  padding: 20px;
}

b.菜单导航区域

菜单导航条包含了一些链接，可以引导用户浏览其他页面：

CSS

/* 导航条 */
.topnav {
  overflow: hidden;
  background-color: #333;
}
 
/* 导航链接 */
.topnav a {
  float: left;
  display: block;
  color: #f2f2f2;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
}
 
/* 链接 - 修改颜色 */
.topnav a:hover {
  background-color: #ddd;
  color: black;
}

c.内容区域

内容区域一般有三种形式:
- 1 列：一般用于移动端
- 2 列：一般用于平板设备
- 3 列：一般用于 PC 桌面设备

mark

我们将创建一个 3 列布局，在小的屏幕上将会变成 1 列布局（响应式）：

CSS

/* 创建三个相等的列 */
.column {
  float: left;
  width: 33.33%;
}
 
/* 列后清除浮动 */
.row:after {
  content: "";
  display: table;
  clear: both;
}
 
/* 响应式布局 - 小于 600 px 时改为上下布局 */
@media screen and (max-width: 600px) {
  .column {
    width: 100%;
  }
}

Tips:提示:要设置两列可以设置 width 为 50%。创建 4 列可以设置为 25%。

不相等的列

CSS

.column {
  float: left;
}
 
/* 左右侧栏的宽度 */
.column.side {
  width: 25%;
}
 
/* 中间列宽度 */
.column.middle {
  width: 50%;
}
 
/* 响应式布局 - 宽度小于600px时设置上下布局 */
@media screen and (max-width: 600px) {
  .column.side, .column.middle {
    width: 100%;
  }
}

mark

d.底部区域

底部区域在网页的最下方，一般包含版权信息和联系方式等。

CSS

.footer {
  background-color: #F1F1F1;
  text-align: center;
  padding: 10px;
}

四.总结

CSS学完开始JS

前端开发学习笔记—–CSS

一.初识

1.CSS语法

2.CSS id和class选择器

3.CSS 插入样式表方式

二.渐进

1.CSS背景

2.CSS文本

a.文本颜色

c.文本修饰

d.文本转换

e.文本缩进

3.CSS 字体

CSS字体属性定义字体,加粗,大小,文字样式.

a.CSS字型

b.字体系列

c.字体样式

d.字体大小

4.CSS链接

5.CSS列表

a.列表属性作用

b.列表类型

c.不同的列表项标记

6.CSS表格

a.表格边框

b.表格宽高

c.表格文字对齐

d.表格填充

e.表格颜色

7.盒子模型

说明:

a.CSS边框 ( border)

CSS边框属性

边框样式 border-style

边框单独设置各边

b.CSS轮廓 outline

c.CSS外边距 margin

d.CSS填充 padding

8.CSS Display(显示) 与 Visibility (可见性)

a.隐藏元素 - display:none 或 visibility: hidden

b.CSS Display - 块和内联元素

c.改变一个元素的显示

9.CSS Position(定位)

a.static 定位

b.fixed 定位

Tips:fixed定位使元素的位置与文档流无关,因此不占据空间.且fixed定位的元素和其他元素重叠

c.relative 定位

d.absolute 定位

e.sticky 定位

f.重叠的元素

Tips: 如果两个定位元素,没有指定z-index ,最后定位在HTML代码中的元素将被显示在最前面.

10.CSS Overflow (布局)

11.CSS Float(浮动)

a.元素怎样浮动

b.彼此相邻的浮动元素

c.清除浮动- clear,指定不允许元素周围有浮动.

12.CSS对齐 -水平&垂直对齐

a.元素居中对齐

Tips:如果没有设置width属性(或者设置100%),则居中对齐将不起作用.

b.文本居中对齐

c.图片居中对齐

d.左右对齐 - 使用定位方式

Tips:绝对定位元素会被从正常流中删除,并且能够交叠元素.

提示:

e.左右对齐 - 使用浮动方式

f.垂直居中对齐 - 使用padding

g.垂直居中 - 使用 line-height

h.垂直居中 - 使用position和transform

三.深入

1.CSS组合选择符

a.后代选择器(以空格连接)

b.子元素选择器(以 大于号 连接)

c.相邻兄弟选择器(以 加号 连接)

d.后续兄弟选择器(以~连接)

2.伪类

a.anchor伪类

b.伪类和css类

c.CSS:first-child伪类

d. CSS- :lang 伪类

3.CSS伪元素

b.子元素选择器(以大于号连接)

c.相邻兄弟选择器(以加号连接)

Tips:提示:要设置两列可以设置 width 为 50%。创建 4 列可以设置为 25%。