竖字css-CSS------风格学习（一）

也想出现在这里？点击联系我~

立即下单

进入商城

进不了网站？换个网络试试！

1. 常用属性

1.背景属性（background）

用途：定义HTML元素的背景

背景颜色（color）属性定义元素的背景颜色。

background-image (url('address')) 属性描述元素的背景图像。 默认情况下，背景图像平铺并水平或垂直显示以覆盖整个元素实体。

background-repeat 设置是否以及如何重复背景图片，水平平铺（设置值为repeat-x），让背景图片不影响文字的排版 使用no-repeat

背景位置属性改变图像在背景中的位置

2. 文字文字

调整标签中的文字，

颜色设置文本颜色

text-align 设置文本的水平对齐方式，可以居中（center），也可以左对齐（left）或右对齐（right），两端对齐（justify）

文本装饰用于设置或删除文本的装饰。 通常用于删除链接的逗号（无）。 您还可以调整线条的位置：文本上（上划线）、文本中（下划线）和下方（下划线）

text-transform 控制元素中的字母，可用于将所有单词变为小写（大写）或大写字母（小写），或者将每个短语的第一个字母变为小写（大写）

text-indent 缩进元素中文本的第一行，例如第一行缩进 50px (text-indent:50px;)

方向设置文本方向。

letter-spacing 设置字符宽度

行高设置列宽

text-shadow 设置文本阴影

unicode-bidi 设置或返回是否重绘文本

Vertical-align 设置元素的垂直对齐方式

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

word-spacing 设置字宽

3. 字体

用途：定义字体、粗体、大小、文本样式。

字体：通用字体和专用字体

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

font-family-specific - 特定字体系列（例如“Times”或“Courier”）

font-family 属性设置文本的字体系列。 多个字体系列由冒号分隔。 如果浏览器不支持第一种字体，它将尝试下一种字体。 如果字体系列名称超过一个单词，则必须用冒号分隔

font-style 字体样式：共有三个值normal（正常）、italic（斜体）和oblique text（倾斜文本）

font-size 属性设置文本的大小。 字体大小值可以是绝对大小或相对大小。 默认大小与普通文本段落相同，即 16 像素 (16px=1em)。

绝对大小：在将文本设置为指定大小、禁止用户在所有浏览器中更改文本大小以及确定输出的数学规范时很有用

相对大小：设置相对于周围元素的大小，允许用户更改浏览器中的文本大小

4.链接：不同的链接（状态）可以有不同的样式（如颜色、字体（text-decoration）、背景（background-color）等）

链接的四种状态：a:link（未访问过的链接）、a:hover（鼠标放在链接上时）、a:active（被点击的那一刻）、a:visited（已访问过）

注意：设置多个链接状态的样式顺序时：a:hover 必须跟随 a:link 和 a:visited，a:active 必须跟随 a:hover

a:link {color:#000000;}      /* 未访问链接*/
a:visited {color:#00FF00;}  /* 已访问链接 */
a:hover {color:#FF00FF;}  /* 鼠标移动到链接上 */
a:active {color:#0000FF;}  /* 鼠标点击时 */

5.List(ordered ol,unordered ul)：设置列表项标记

list-style-type 指定列表项标记的类型

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

列表样式简写属性。用于在一个声明中设置列表的所有属性

list-style-position 设置列表项标记在列表中的位置。

6. 边框

用途：指定元素边框的样式和颜色。

border-style 属性用于定义边框的样式。 也可以分别设置（border-top-style）右（border-right-style）下（border-bottom-style）left（）。 常用值扎实

none：默认无边框

dotted：定义虚线边框

虚线：定义实线边框

实心：定义虚线边框

double：定义两个边框。两个边框的长度与border-width的值相同

groove：定义3D凹槽边框。效果取决于边框的颜色值

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

inset：定义3D插入边框。效果取决于边框的颜色值

outset：定义3D起始边框。效果取决于边框的颜色值

border-width 属性指定边框的长度。指定边框长度的方法有两种： 可以指定宽度值，例如 2px 或 0.1em（单位有 px、pt、cm、em 等）。 ），或者使用3个关键字（thick、medium（默认值）和thin），CSS没有定义3个关键字的具体长度，可以更改

border-color属性用于设置边框的颜色，单独使用不起作用。 您必须首先使用 border-style 来设置边框样式。

//边框简写 border-width、border-style、border-color
border:5px solid red;

7.轮廓：指定元素轮廓的样式、颜色和长度

定义：是围绕元素绘制的一条线，位于border边缘的外围，可以起到突出元素的作用。

轮廓颜色设置轮廓的颜色

轮廓样式设置轮廓的样式

轮廓宽度设置轮廓的长度

8. margin 属性定义元素周围的空间。

margin 清除周围（外边框）元素区域，没有背景色，并且完全透明。 您可以单独更改元素的上、下、左、右页边距，也可以一次更改所有属性

取值方法：auto（居中，会取决于浏览器，也就是设置浏览器行距）、length（定义一个固定值竖字css，如pixels、pt、em等）、%（定义一个行距使用一个比例）

注意缩写中四个值的顺序是：top（边距-顶部）、right（右）、bottom（底部）、left（左）

9、padding（内行间距），填充，定义元素边框与元素内容之间的空间，即上下左右的内行间距

当删除元素的填充时，释放的区域将填充元素的背景颜色。

取值方式：length（定义固定值，如pixels、pt、em等）、%（使用比例定义行距）

注意缩写中四个值的顺序是：top（边距-顶部）、right（右）、bottom（底部）、left（左）

10、尺寸（size）：控制元素的高度、宽度、行宽（line-heignt）

height：设置元素的高度。

line-height ：设置列宽。

max-height ：设置元素的最大高度。

min-height ：设置元素的最小高度。

width ：设置元素的长度。

min-width ：设置元素的最小长度。

max-width ：设置元素的最大长度。

11.盒子模型：本质上是一个盒子，它包括：边距、边框、填充和实际内容，允许我们将元素放置在其他元素和周围元素边框之间的空间中。

使用包袋设计模型时要注意：

边距 - 清除边框以外的区域，边距是透明的。

边框 - 填充和内容外部的边框。

填充 - 清除内容周围的区域并使填充透明。

内容 - 框的内容，显示文本和图像

元素总长度 = 宽度 + 左内边距 + 右内边距 + 左边框 + 右边框 + 左边距 + 右前导

元素总高度 = 高度 + 顶部内边距 + 底部内边距 + 顶部边框 + 底部边框 + 顶部行间距 + 底部边缘

12.表格形式

常用属性：边框、宽度、高度、文本对齐方式、padding、跨行、跨列

text-align 属性设置水平对齐方式，左对齐、右对齐或居中：

border-collapse 属性设置表格的边框是折叠为单个边框还是分开的。

colspan 属性指定单元格可以跨越的列数。 所有浏览器都支持 colspan 属性。 它的值是数字

rowspan 属性指定单元格可以遍历的行数。 所有浏览器都支持 rowspan 属性。 它的值是数字

13. 导航栏：链接列表，借助

list-style-type:none - 删除列表前面的小标志。导航栏不需要列表标记

margin,padding：去掉浏览器默认的行间距和padding设置为0

display:block - 显示块元素的链接，使整个链接区域（不仅仅是文本）可单击。 它允许我们指定长度。

显示：内嵌； - 默认情况下，该元素是块元素。这里我们删除换行符前后的每个列表项以显示单行

14、下拉菜单：连接鼠标后显示下拉菜单的效果。

主要依靠：hover（鼠标经过触发）display:block（显示，先隐藏none）竖字css，利用定位来调整下拉项（相对）和下拉内容（绝对）的位置。

.dropdown:hover .dropdown-content {
  display: block;
}

15. 工具提示

它类似于下拉菜单。 还可以使用visible属性的两个值（visible（显示）和hidden（隐藏））

需要提示的文字使用position:relative。 提示文字需要设置定位值position:absolute。

:hover 选择器用于在键盘连接到指定元素时显示（可见）提示。

CSS3border-radius 属性用于向工具提示添加圆角。

小箭头：使用CSS伪元素::after和content属性为提示工具创建小箭头标记。 箭头由边框组成，但组合起来后，提示工具看起来就像一个语音消息框。

淡入效果：利用CSS3的transition属性和opacity属性实现提示工具的淡入效果

16. 透明度不透明度

不透明度属性值范围为0.0 - 1.0。 较小的值使元素更加透明。 如(不透明度:1.0;)

IE8及更早版本使用滤镜：alpha（不透明度= x）。 x 可以取的值是从 0 - 100。较低的值使元素更加透明。 如(filter:alpha(opacity=100);)

img
{
  opacity:0.4;
  filter:alpha(opacity=40); /*  IE8 及其更早版本 */
}
img:hover
{
  opacity:1.0;
  filter:alpha(opacity=100); /* IE8 及其更早版本 */
}

17.媒体类型@media：在同一个样式表中为不同的媒体设置不同的样式

指示：

/* 浏览器屏幕上显示一个 14 像素的 Verdana 字体样式 */
@media screen
{
    p.test {font-family:verdana,sans-serif;font-size:14px;}
}
/* 页面打印，将是 10 个像素的 Times 字体*/
@media print
{
    p.test {font-family:times,serif;font-size:10px;}
}
/*在屏幕上和纸上设置为粗体*/
@media screen,print
{
    p.test {font-weight:bold;}
}

常见类型：

all：适用于所有媒体设备。

打印：用于打印机。

屏幕：用于计算机显示器。

aural：用于语音和音频合成器。

braille：盲人盲文听觉反馈设备。

浮雕：用于盲人分页的盲文打印机。

手持设备：用于小型手持设备的设备。

投影：用于节目演示，例如幻灯片。

tty：适用于使用固定密度字母网格的媒体，例如电传打字机和终端。

tv：用于电视类型设备。

18、计数器：通过变量设置，并按照规则递增变量

content 使用 ::before 和 ::after 伪元素插入手动生成的内容

反增量增加一个或多个值

counter-reset 创建或重置一个或多个计数器

全部

适用于所有媒体设备。

听觉的

用于语音和音频合成器。

盲文

盲人盲文听觉反馈装置。

浮雕的

盲人盲文打印机。

手持式

适用于小型手持设备。

打印

对于打印机。

投影

用于节目演示，例如幻灯片。

屏幕

用于电脑显示器。

终端

用于使用固定密度字母网格的媒体，例如电传打字机和终端。

电视

用于电视类设备。