CSS笔记

CSS规则

由两部分构成 

选择器以及一条或多条声明

每条声明由一个属性和一个值组成

ID选择器

为标有特定ID属性的HTML元素指定特定的样式，以#来定义

Class选择器

用于描述一组元素的样式，有别于ID选择器，class可以在多个元素中使用，以 . 显示

注意：

类名的第一个字符不能使用数字

选择器包括： ID选择器、类选择器、元素选择器、属性选择器、包含选择器、子选择器、兄弟选择器

css 中逗号，空格，冒号，点号的含义

一：#a,b{…………｝

二：#a b{…………｝

三：#a:b{…………｝

四：#a.b{…………｝

这是四个分别代表着什么含义呢？

一、一个id叫a和一个标签是b的样式

二、一个id叫a下面的一个标签是b的样式

三、一个id叫a的伪类b，例如：a:hover

四、一个id叫a的下面的class叫b的样式

插入样式表的三种方法

1、外部样式表

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

2、内部样式表

< head > < style > hr {color:sienna;} p {margin-left:20px;} body {background-image:url("images/back40.gif");} </ style > </ head >

3、内联样式表(慎用)

<p style="color:sienna;margin-left:20px">这是一个段落。</p>

4、多重样式

如果某些属性在不同的样式表中被相同的选择器定义，那么属性值将从具体的样式表中被继承出来

h3 { color: red ; text-align: left ; font-size: 8 pt ; }

h3 { text-align: right ; font-size: 20 pt ; }

多重样式优先级

（内联样式）Inline style > （内部样式）Internal style sheet >（外部样式）External style sheet > 浏览器默认样式

< head > <!-- 外部样式 style.css --> < link rel = " stylesheet " type = " text/css " href = " style.css " /> <!-- 设置：h3{color:blue;} --> < style type = " text/css " > /* 内部样式 */ h3{color:green;} </ style > </ head >

注意： 如果外部样式放在内部样式的后面，则外部样式将覆盖内部样式。

内联样式 > id 选择器 > 类选择器 = 伪类选择器 = 属性选择器 > 标签选择器 = 伪元素选择器

!important 规则例外

当 !important 规则被应用在一个样式声明中时,该样式声明会覆盖CSS中任何其他的声明

CSS背景

background-color                         背景颜色

background-image                        背景图片

background-repeat                        背景图像是否及如何重复

background-attachment                 背景图片是否固定或随着页面其余部分滚动

         background-position                             背景图像起始位置

文本对齐方式

当text-align设置为"justify"，每一行被展开为宽度相等，左，右外边距是对齐

color                           设置文本颜色

direction                      设置文本方向

letter-spacing              设置字符间距

line-height                    设置行高

text-align                      对齐元素中的文本

text-align                     对齐元素中的文本

text-decoration            想文本添加修饰

text-indent                   缩进元素中文本的首行

text-shadow                  设置文本阴影

text-transform              控制元素中的字母

unicode-baidi               设置或返回文本是否被重写

vertical-space                设置元素中空白的处理方式

word-spacing                设置字间距

汉字的间隔调节也是用 letter-spacing 来实现的。

因为中文段落里字与字之间没有空格，因而 word-spacing 通常起不到调整间距的作用。

CSS字体属性

font-family                   指定文本的字体系列

font-size                      指定文本的字体大小

font-style                     指定文本的字体样式

font-variant                  以小型大写字体或正常字体显示文本

font-weight                    指定字体的粗细

链接样式

a :link { color: #000000 ; } /* 未访问链接 */

a :visited { color: #00FF00 ; } /* 已访问链接 */

a :hover { color: #FF00FF ; }  /* 鼠标移动到链接上 */ 

a :active { color: #0000FF ; } /* 鼠标点击时 */

列表属性

list-style             简写属性，用于把所有用于列表的属性设置于一个声明中

list-style-image  将图像设置为列表项标志

list-style-position  设置列表中列表项标志的位置

list-style-type       设置列表项标志的类型

边框属性

dotted               点线边框

dashed              虚线边框

solid                  定义实线边框

double               定义两个边框

groove              定义3 D沟槽边框

ridge                 定义3D脊边框

inset                定义3D嵌入边框

outset              定义3D突出边框

CSS 轮廓（outline）

轮廓（outline）是绘制于元素周围的一条线，位于边框边缘的外围，可起到突出元素的作用。

CSS outline 属性规定元素轮廓的样式、颜色和宽度

分组选择器

h1 { color: green ; } 

h2 { color: green ; } 

p { color: green ; }

为尽量减少代码，可使用分组选择器

h1,h2,p { color:green; }

隐藏元素

 1、 display:none 元素不再占用空间。

 2、 visibility: hidden 使元素在网页上不可见，但仍占用空间

块级元素(block)特性：

总是独占一行，表现为另起一行开始，而且其后的元素也必须另起一行显示;

宽度(width)、高度(height)、内边距(padding)和外边距(margin)都可控制;

内联元素(inline)特性：

和相邻的内联元素在同一行;

宽度(width)、高度(height)、内边距的top/bottom(padding-top/padding-bottom)和外边距的top/bottom(margin-top/margin-bottom)都不可改变，就是里面文字或图片的大小;

块级元素主要有：

 address , blockquote , center , dir , div , dl , fieldset , form , h1 , h2 , h3 , h4 , h5 , h6 , hr , isindex , menu , noframes , noscript , ol , p , pre , table , ul , li

内联元素主要有：

a , abbr , acronym , b , bdo , big , br , cite , code , dfn , em , font , i , img , input , kbd , label , q , s , samp , select , small , span , strike , strong , sub , sup ,textarea , tt , u , var

可变元素(根据上下文关系确定该元素是块元素还是内联元素)：

applet ,button ,del ,iframe , ins ,map ,object , script

CSS中块级、内联元素的应用：

利用CSS我们可以摆脱上面表格里HTML标签归类的限制，自由地在不同标签/元素上应用我们需要的属性。

主要用的CSS样式有以下三个：

display:block  -- 显示为块级元素

display:inline  -- 显示为内联元素

display:inline-block -- 显示为内联块元素，表现为同行显示并可修改宽高内外边距等属性

我们常将所有<li>元素加上display:inline-block样式，原本垂直的列表就可以水平显示了。

CSS Position

static定位

HTML元素的默认值，即没有定位，遵循正常的文档流对象

静态定位的元素不会受到 top, bottom, left, right影响。

Fixed定位

元素的位置相对于浏览器窗口是固定位置

即使窗口是滚动的，它也不会移动

p .pos _ fixed { position: fixed ; top: 30 px ; right: 5 px ; }

relative定位

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

h2 .pos _ left { position: relative ; left: - 20 px ; } h2 .pos _ right { position: relative ; left: 20 px ; }

absolute定位

绝对定位的元素相对于最近的已定位父元素，如果没有已定位的父元素，那么它的位置相对于<html>

absolute 定位使元素的位置与文档流无关，因此不占据空间。

absolute 定位的元素和其他元素重叠。

sticky定位

粘性定位，依赖于用户的滚动，在 在  position:relative  与  position:fixed  定位之间切换。 元素定位表现为在跨越特定阈值前为相对定位，之后为固定定位

元素的定位与文档流无关，所以它们可以覆盖页面上的其它元素

z-index属性指定了一个元素的堆叠顺序（哪个元素应该放在前面，或后面）

一个元素可以有正数或负数的堆叠顺序

img { position: absolute ; left: 0 px ; top: 0 px ; z-index: - 1 ; }

CSS overflow 属性用于控制内容溢出元素框时显示的方式。

visible           默认值，内容不会被修剪，会呈现在元素框之外。

hidden          内容会被修剪，并且其余内容是不可见的

scroll            内容会被修剪，但是浏览器会显示滚动条以查看其余的内容

auto             如果内容被修剪，则浏览器会显示滚动条以查看其余的内容

inherit         规定从父元素继承overflow属性的值

清除浮动

.text _ line { clear: both ; }

元素居中对齐

要水平居中对齐一个元素(如 <div>), 可以使用 margin: auto;。

设置到元素的宽度将防止它溢出到容器的边缘。

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

注意:  如果没有设置  width  属性(或者设置 100%)，居中对齐将不起作用。

文本居中对齐

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

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

图片居中对齐

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

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

垂直居中

.center { padding: 70 px 0 ; border: 3 px solid green ; }

水平和垂直都居中，可以使用  padding  和  text-align: center :

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

使用line-height垂直居中

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

CSS组合选择符

后代选择器(以空格     分隔)

div p { background-color: yellow ; }

子元素选择器(以大于  > 号分隔）—— 只能选择作为某元素直接/一级子元素的元素

div > p { background-color: yellow ; }

相邻兄弟选择器（以加号  + 分隔）—— 可选择紧接在另一元素后的元素，且二者有相同父元素

div + p { background-color: yellow ; }

普通兄弟选择器（以波浪号  ～ 分隔）—— 选取所有指定元素之后的相邻兄弟元素。

div ~ p { background-color: yellow ; }

伪类

a :link { color: #FF0000 ; } /* 未访问的链接 */

a :visited { color: #00FF00 ; } /* 已访问的链接 */

a :hover { color: #FF00FF ; } /* 鼠标划过链接 */ 

a :active { color: #0000FF ; } /* 已选中的链接 */

注意： 在CSS定义中，a:hover 必须被置于 a:link 和 a:visited 之后，才是有效的。

注意： 在 CSS 定义中，a:active 必须被置于 a:hover 之后，才是有效的。

注意：伪类的名称不区分大小写。

选择器匹配作为任何元素的第一个子元素的 <p> 元素：

p:first-child { color:blue; }

选择相匹配的所有<p>元素的第一个 <i> 元素：

p > i:first-child { color:blue; }

选择器匹配所有作为元素的第一个子元素的 <p> 元素中的所有 <i> 元素：

p:first-child i { color:blue; }

伪类与伪元素的不同

伪类选择元素基于的是当前元素处于的状态， 由于状态是动态变化的，所以一个元素达到一个特定状态时，它可能得到一个伪类的样式；当状态改变时，它又会失去这个样式。 伪元素是对元素中的特定内容进行操作，它所操作的层次比伪类更深了一层，也因此它的动态性比伪类要低得多。 它本身只是基于元素的抽象，并不存在于文档中，所以叫伪元素。

CSS导航栏

list-style-type:none - 移除列表前小标志。一个导航栏并不需要列表标记

垂直导航栏

a { display: block ; width: 60 px ; }

display:inline; -默认情况下，<li>元素是块元素。在这里，我们删除换行符之前和之后每个列表项，以显示一行。

display:block - 显示块元素的链接，让整体变为可点击链接区域（不只是文本），它允许我们指定宽度

width:60px - 块元素默认情况下是最大宽度。我们要指定一个60像素的宽度

左边是全屏高度的固定导航条，右边是可滚动的内容。

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

水平导航条

在鼠标移动到选项后修改背景颜色

ul { list-style-type: none ; margin: 0 ; padding: 0 ; overflow: hidden ; background-color: #333 ; } 

li { float: left ; } 

li a { display: block ; color: white ; text-align: center ; padding: 14 px 16 px ; text-decoration: none ; }

/* 鼠标移动到选项上修改背景颜色 */ 

li a :hover { background-color: #111 ; }

固定导航条

可以设置页面的导航条固定在头部或者底部：

头部

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

底部

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

下拉菜单

<style>

/* 下拉按钮样式 */

.dropbtn {

     background-color:  #4CAF50;

     color:  white;

     padding:  16px;

     font-size:  16px;

     border:  none;

     cursor:  pointer;

}

/* 容器 <div> - 需要定位下拉内容 */

.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);

}

/* 下拉菜单的链接 */

.dropdown-content a  {

     color:  black;

     padding:  12px 16px;

     text-decoration:  none;

     display:  block;

}

/* 鼠标移上去后修改下拉菜单链接颜色 */

.dropdown-content a:hover  { background-color:  #f1f1f1 }

/* 在鼠标移上去后显示下拉菜单 */

.dropdown:hover .dropdown-content  {

     display:  block;

}

/* 当下拉内容显示后修改下拉按钮的背景颜色 */

.dropdown:hover .dropbtn  {

     background-color:  #3e8e41;

}

</style>

< div  class= "dropdown" >

   < button  class= "dropbtn" > 下拉菜单 < /button >

   < div  class= "dropdown-content" >

     < a  href= "#" > 1 < /a >

     < a  href= "#" > 2 < /a >

     < a  href= "#" > 3 < /a >

   < /div >

< /div >

提示框

<style>

/* Tooltip 容器 */

.tooltip { position: relative; display: inline-block; border-bottom: 1px dotted black; /* 悬停元素上显示点线 */ }

/* Tooltip 文本 */

.tooltip .tooltiptext { visibility: hidden; width: 120px; background-color: black; color: #fff; text-align: center; padding: 5px 0; border-radius: 6px; /* 定位 */ position: absolute; z-index: 1; }

/* 鼠标移动上去后显示提示框 */

.tooltip:hover .tooltiptext { visibility: visible; }

</style>

< div class = " tooltip " > 鼠标移动到这 < span class = " tooltiptext " > 提示文本 </ span > </ div >

响应式布局

根据屏幕的大小来调整

* { box-sizing: border-box ; } body { font-family: Arial ; padding: 10 px ; background: #f1f1f1 ; } 

/* 头部标题 */

.header { padding: 30 px ; text-align: center ; background: white ; } .header h1 { font-size: 50 px ; } 

/* 导航条 */ 

.topnav { overflow: hidden ; background-color: #333 ; } 

/* 导航条链接 */

.topnav a { float: left ; display: block ; color: #f2f2f2 ; text-align: center ; padding: 14 px 16 px ; text-decoration: none ; }

/* 链接颜色修改 */

.topnav a :hover { background-color: #ddd ; color: black ; } 

/* 创建两列 */ /* Left column */ .leftcolumn { float: left ; width: 75 % ; } 

/* 右侧栏 */ .

rightcolumn { float: left ; width: 25 % ; background-color: #f1f1f1 ; padding-left: 20 px ; } 

/* 图像部分 */

.fakeimg { background-color: #aaa ; width: 100 % ; padding: 20 px ; }

/* 文章卡片效果 */

.card { background-color: white ; padding: 20 px ; margin-top: 20 px ; }

/* 列后面清除浮动 */

.row :after { content: "" ; display: table ; clear: both ; } 

/* 底部 */

.footer { padding: 20 px ; text-align: center ; background: #ddd ; margin-top: 20 px ; } 

/* 响应式布局 - 屏幕尺寸小于 800px 时，两列布局改为上下布局 */

@media screen and (max-width: 800 px ) { .leftcolumn , .rightcolumn { width: 100 % ; padding: 0 ; } } 

/* 响应式布局 -屏幕尺寸小于 400px 时，导航等布局改为上下布局 */ @media screen and (max-width: 400 px ) { .topnav a { float: none ; width: 100 % ; } }

网页布局