CSS初学

CSS初学

1、选择器

• id：#para1{}

• class：.center{}

• 元素：p{}

• 分组：每个选择器用逗号分隔。

• 嵌套：

  • id-元素-类：#para1 p.center{}

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

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

• 不要以数字开头

2、创建

插入样式表的方法有三种:

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

内联样式 > 内部样式 > 外部样式 > 浏览器默认样式

3、属性

背景

• background-color

  • 十六进制 - 如："#ff0000"
  • RGB - 如：“rgb(255,0,0)”
  • 颜色名称 - 如：“red”

• background-image

  • 默认情况下，背景图像进行平铺重复显示，以覆盖整个元素实体

• background-repeat

  • repeat-x 只在水平方向重复、no-repeat 无重复

• background-attachment

• 背景图像是否固定或者随着页面的其余部分滚动

• background-position：right top;

简写（👆的顺序）body {background:#ffffff url(‘img_tree.png’) no-repeat right top;}

text文本

属性	描述
color	设置文本颜色
direction	设置文本方向。
letter-spacing	设置字符间距
line-height	设置行高
text-align	对齐元素中的文本
text-decoration	向文本添加修饰
text-indent	缩进元素中文本的首行
text-shadow	设置文本阴影
text-transform	控制元素中的字母
unicode-bidi	设置或返回文本是否被重写
vertical-align	设置元素的垂直对齐
white-space	设置元素中空白的处理方式
word-spacing	设置字间距

字体

Property	描述
font	在一个声明中设置所有的字体属性
font-family	指定文本的字体系列
font-size	指定文本的字体大小
font-style	指定文本的字体样式
font-variant	以小型大写字体或者正常字体显示文本。
font-weight	指定字体的粗细

• 通用字体系列 - 拥有相似外观的字体系统组合（如 “Serif” 或 “Monospace”）

• 特定字体系列 - 一个特定的字体系列（如 “Times” 或 “Courier”）

• font-family 属性应该设置几个字体名称作为一种"后备"机制，如果浏览器不支持第一种字体，他将尝试下一种字体。字体系列名称超过一个字，须用引号，如Font Family：“宋体”。多个字体系列用逗号分隔。

• 1em的默认大小是16px。px/16=em

链接link

• a:link - 正常，未访问过的链接

• a:visited - 用户已访问过的链接

• a:hover - 当用户鼠标放在链接上时

• a:active - 链接被点击的那一刻

• a:hover 必须跟在 a:link 和 a:visited后面，a:active 必须跟在 a:hover后面

• text-decoration 属性主要用于删除链接中的下划线

• 背景颜色属性指定链接背景色

列表：

属性	描述
list-style	简写属性。用于把所有用于列表的属性设置于一个声明中
list-style-image	将图像设置为列表项标志。
list-style-position	设置列表中列表项标志的位置。
list-style-type	设置列表项标志的类型。

• list-style-type:none 属性可以用于移除小标记。默认情况下列表 < ul> 或 < ol> 还设置了内边距和外边距，可使用 margin:0 和 padding:0 来移除
• list-style-position：

值	描述
inside	列表项目标记放置在文本以内，且环绕文本根据标记对齐。
outside	默认值。保持标记位于文本的左侧。列表项目标记放置在文本以外，且环绕文本不根据标记对齐。
inherit	规定应该从父元素继承 list-style-position 属性的值。

• list-style-type：

none	无标记。
disc	默认。标记是实心圆。
circle	标记是空心圆。
square	标记是实心方块。
decimal	标记是数字。
decimal-leading-zero	0开头的数字标记。(01, 02, 03, 等。)
lower-roman	小写罗马数字(i, ii, iii, iv, v, 等。)
upper-roman	大写罗马数字(I, II, III, IV, V, 等。)
lower-alpha	小写英文字母The marker is lower-alpha (a, b, c, d, e, 等。)
upper-alpha	大写英文字母The marker is upper-alpha (A, B, C, D, E, 等。)

表格

• border-collapse:collapse;消除双边框
• 如需控制边框和表格内容之间的间距，应使用td和th元素的padding属性

盒子模型

CSS盒模型本质上是一个盒子，封装周围的HTML元素，它包括：边距，边框，填充，和实际内容。

• Margin(外边距) - 清除边框外的区域，外边距是透明的。

• Border(边框) - 围绕在内边距和内容外的边框。

• Padding(内边距) - 清除内容周围的区域，内边距是透明的。

• Content(内容) - 盒子的内容，显示文本和图像。

指定一个 CSS 元素的宽度和高度属性时，只是设置内容区域的宽度和高度。完整大小的元素，还必须添加内边距，边框和外边距。

• 总元素的宽度=宽度+左填充+右填充+左边框+右边框+左边距+右边距

• 总元素的高度=高度+顶部填充+底部填充+上边框+下边框+上边距+下边距

边框

属性	描述
border	简写属性，用于把针对四个边的属性设置在一个声明。
border-style	用于设置元素所有边框的样式，或者单独地为各边设置边框样式。
border-width	简写属性，用于为元素的所有边框设置宽度，或者单独地为各边边框设置宽度。
border-color	简写属性，设置元素的所有边框中可见部分的颜色，或为 4 个边分别设置颜色。
border-bottom	简写属性，用于把下边框的所有属性设置到一个声明中。
border-bottom-color	设置元素的下边框的颜色。
border-bottom-style	设置元素的下边框的样式。
border-bottom-width	设置元素的下边框的宽度。

border-style 值:

• none: 默认无边框

• dotted: 定义一个点线边框

• dashed: 定义一个虚线边框

• solid: 定义实线边框

• double: 定义两个边框。 两个边框的宽度和 border-width 的值相同

• groove: 定义3D沟槽边框。效果取决于边框的颜色值

• ridge: 定义3D脊边框。效果取决于边框的颜色值

• inset:定义一个3D的嵌入边框。效果取决于边框的颜色值

• outset: 定义一个3D突出边框。 效果取决于边框的颜色值

width：

• 可以指定长度值，比如 2px 或 0.1em(单位为 px, pt, cm, em 等)
• 使用 3 个关键字之一，它们分别是 thick 、medium（默认值） 和 thin /没有固定大小

简写：border:5px solid(required) red;

outline 轮廓

• 轮廓（outline）是绘制于元素周围的一条线，位于边框边缘的外围，可起到突出元素的作用。
• 设置跟边框差不多，不过四边相同，注意outline不占空间！

属性	说明
outline	在一个声明中设置所有的轮廓属性
outline-color	设置轮廓的颜色
outline-style	设置轮廓的样式
outline-width	设置轮廓的宽度

margin 外边距

• margin 清除周围的（外边框）元素区域。margin 没有背景颜色，是完全透明的。
• 两个元素之间的外边距是两者margin属性中大的那一个。

值	说明
auto	设置浏览器边距。 这样做的结果会依赖于浏览器
length	定义一个固定的margin（使用像素，pt，em等）
%	定义一个使用百分比的边距

padding 填充

• padding区域处于元素背景中。border不处于

width height 尺寸

属性	描述
height	设置元素的高度。content的高度
line-height	设置行高。
max-height	设置元素的最大高度。
max-width	设置元素的最大宽度。
min-height	设置元素的最小高度。
min-width	设置元素的最小宽度。
width	设置元素的宽度。

隐藏

• visibility:hidden可以隐藏某个元素，但隐藏的元素仍需占用与未隐藏之前一样的空间。

• display:none可以隐藏某个元素，且隐藏的元素不会占用任何空间。

• visibility 还可能取值为 collapse ：

  当设置元素 visibility: collapse 后，一般的元素的表现与 visibility: hidden 一样，也即其会占用空间。但如果该元素是与 table 相关的元素，例如 table row、table column、table column group 等，其表现却跟 display: none 一样，也即其占用的空间会释放。

Display - 块和内联元素

• 块级元素(block)特性：

  • 总是独占一行，表现为另起一行开始，而且其后的元素也必须另起一行显示
  • 宽度(width)、高度(height)、内边距(padding)和外边距(margin)都可控制

• 内联元素(inline)特性：

  • 和相邻的内联元素在同一行
  • 宽度(width)、高度(height)、内边距的top/bottom(padding-top/padding-bottom)和外边距的top/bottom(margin-top/margin-bottom)都不可改变，就是里面文字或图片的大小

• **可变元素(根据上下文关系确定该元素是块元素还是内联元素)：**applet ,button ,del ,iframe , ins ,map ,object , script

• display:block – 显示为块级元素

• display:inline – 显示为内联元素

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

position定位

属性	说明	值
bottom	定义了定位元素下外边距边界与其包含块下边界之间的偏移。	auto length % inherit
clip	剪辑一个绝对定位的元素	shape auto inherit
cursor	显示光标移动到指定的类型	url auto crosshair default pointer move e-resize ne-resize nw-resize n-resize se-resize sw-resize s-resize w-resize text wait help
left	定义了定位元素左外边距边界与其包含块左边界之间的偏移。	auto length % inherit
overflow	设置当元素的内容溢出其区域时发生的事情。	auto hidden scroll visible inherit
overflow-y	指定如何处理顶部/底部边缘的内容溢出元素的内容区域	auto hidden scroll visible no-display no-content
overflow-x	指定如何处理右边/左边边缘的内容溢出元素的内容区域	auto hidden scroll visible no-display no-content
position	指定元素的定位类型	absolute fixed relative static inherit
right	定义了定位元素右外边距边界与其包含块右边界之间的偏移。	auto length % inherit

• static 定位

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

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

• fixed 定位

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

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

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

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

• relative 定位

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

  移动相对定位元素，但它原本所占的空间不会改变。

  相对定位元素经常被用来作为绝对定位元素的容器块。

• absolute 定位

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

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

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

  • fixed、absolute区别：

    1、没有滚动条的情况下没有差异

    2、在有滚动条的情况下，fixed定位不会随滚动条移动而移动，而absolute则会随滚动条移动

• sticky 定位

  粘性定位的元素是依赖于用户的滚动，在 position:relative 与 position:fixed 定位之间切换。

  元素定位表现为在跨越特定阈值前为相对定位，之后为固定定位。

  这个特定阈值指的是 top, right, bottom 或 left 之一，换言之，指定 top, right, bottom 或 left 四个阈值其中之一，才可使粘性定位生效。否则其行为与相对定位相同。

z-index 重叠

• 有更高堆叠顺序的元素总是在较低的堆叠顺序元素的前面。

• 如果两个定位元素重叠，没有指定z - index，最后定位在HTML代码中的元素将被显示在最前面。

Overflow

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

**注意: **overflow 属性只工作于指定高度的块元素上。

Float 浮动

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

• 元素的水平方向浮动，意味着元素只能左右移动而不能上下移动。
• 一个浮动元素会尽量向左或向右移动，直到它的外边缘碰到包含框或另一个浮动框的边框为止。
• 浮动元素之后的元素将围绕它。
• 浮动元素之前的元素将不会受到影响。
• 如果图像是右浮动，后面的文本流将环绕在它左边。
• 如果把几个浮动的元素放到一起，如果有空间的话，它们将彼此相邻。
• 元素浮动之后，周围的元素会重新排列，为了避免这种情况，使用 clear 属性。clear 属性指定元素两侧不能出现浮动元素。

属性	描述	值
clear	指定不允许元素周围有浮动元素。	left right both none inherit
float	指定一个盒子（元素）是否可以浮动。	left right none inherit

对齐

水平对齐

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

  • 注意:* 如果没有设置 width 属性，居中对齐将不起作用。

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

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

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

• 也可以使用 float 属性来对齐元素

  • 如果子元素的高度大于父元素，且子元素设置了浮动，那么子元素将溢出，这时候可以在父元素上通过添加 clearfix 类，并设置 overflow: auto; 来解决该问题

垂直对齐

• 一个简单的方式就是使用 padding:20px 0;

• 使用line-height：

.center {
    line-height: 200px;//让 line-height 属性值和 height 属性值相等来设置 div 元素居中
    height: 200px;
    border: 3px solid green;
    text-align: center;
}
 
/* 如果文本有多行，添加以下代码: */
.center p {
    line-height: 1.5;//单行时子元素200px居中，多行时每行如果还是200px就会溢出，所以每行1.5，整体200px？
    display: inline-block;
    vertical-align: middle;//这个有什么用啊？
}

• 使用transform：

  		margin: 0;
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
  

组合选择符

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

• 子元素选择器(以大于 > 号分隔）

  与后代选择器相比，子元素选择器（Child selectors）只能选择作为某元素直接/一级子元素的元素

• 相邻兄弟选择器（以加号 + 分隔）

  可选择紧接在另一元素后的元素，且二者有相同父元素

• 普通兄弟选择器（以波浪号 ～ 分隔）

  选取所有指定元素之后的相邻兄弟元素。

伪类

• p:first-child——匹配第一个 < p> 元素
• p > i:first-child——匹配所有< p> 元素中的第一个 < i> 元素
• p:first-child i ——匹配所有作为第一个子元素的 < p> 元素中的所有 < i> 元素

:link	a:link	选择所有未访问链接
:visited	a:visited	选择所有访问过的链接
:active	a:active	选择正在活动链接
:hover	a:hover	把鼠标放在链接上的状态
:focus	input:focus	选择元素输入后具有焦点
:first-letter	p:first-letter	选择每个< p> 元素的第一个字母
:first-line	p:first-line	选择每个< p> 元素的第一行
:first-child	p:first-child	选择器匹配属于任意元素的第一个子元素的 < p> 元素
:before	p:before	在每个< p>元素之前插入内容
:after	p:after	在每个< p>元素之后插入内容

透明度

• opacity属性值从0.0 - 1.0，值越小，使得元素更加透明。
• 早期版本使用滤镜：alpha（opacity= x）， x可以采取的值是从0 - 100，较低的值，使得元素更加透明。

媒体类型

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

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

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

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

属性选择器

具有特定属性的HTML元素样式不仅仅是class和id，还可以是：

• [title]{ }——所有包含title的元素
• [title=runoob]{ }——标题等于runoob的所有元素
• [title~=hello] { }——title包含hello的元素
• input[type=text] ——选取文本输入框
• input[type=password] ——选择密码的输入框

未完待续…