去哪儿网CSS样式详解

CSS样式详解

淮安网站建设公司创新互联公司,淮安网站设计制作，有大型网站制作公司丰富经验。已为淮安千余家提供企业网站建设服务。企业网站搭建\外贸营销网站建设要多少钱，请找那个售后服务好的淮安做网站的公司定做！

字体样式(font)

字体

font-family:字体名

font-family:字体名1，字体名2...

font-family: fantasy | monospace | ncursive | serif | sans-serif

字体系列

cursive：模拟手写的字体，通常这类字体的曲线比较明显。

monospace：无比例的字体。通常用于模拟打字机中打出来的文字，也就是等宽字体。

serif：有比例有衬线的字体，这种字体中的所有字母都根据不同需要占有不同的宽度，有衬线是指在字母上做装饰的细线。

sans-serif：有比例无衬线的字体，这种字体中的所有字母都根据不同需要占有不同的宽度。

文字大小

font-size: xx-small | x-small | small | medium | large | x-large | xx-large | larger | smaller | 长度 | 百分比

xx-small：文字显示为最小(绝对)；

x-small：文字显示为较小(绝对)；

small：文字显示为小(绝对)；

medium：默认值(绝对)

large：文字显示为大(绝对)；

x-large：文字显示为较大(绝对)；

xx-large：文字显示为最大(绝对)；

larger：增大(相对)；

smaller：减小(相对)；

长度：数值加上单位；

百分比：相对字体大小。

文字大小调整

在英文方面，一段文字看上去是否舒服，很大程度上取决于当前字体的高度与这种字体的小写x字母高度的比值，这个比值称为字体的面值。

font-size-adjust: none | number

none：不改变文字大小；

number：强制文字使用面值。

粗体

font-weight: normal | bold | bolder | lighter | 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900

normal：默认值(400)，正常粗细；

bold：加粗(700)；

bolder：比normal粗，比bold细；

lighter：不比normal粗；

x00：分9个级别，数值越大越粗。

斜体

font-style: normal | italic | bolique

normal：默认值，代表正常的字体；

italic：斜体；

bolique：倾斜的字体。

文字变形－小型大写字母

fontvariant: normal | small-caps

normal：默认值；

small-caps：小型大写字母

小型大写字母指将字母更改为大写字母，并且该大写字母比通常的大写字母要小。

文字变形－文字拉伸

font-stretch: normal | narrower | wider | ultra-condensed | extra-condensed | condensed | semi-condensed | semi-expanded | expanded | extra-expanded | ultra-expanded

normal：默认值，不拉伸变形；

narrower：水平方向变窄；

wider：水平方向变宽；

condensed：压缩文字；

extra-condensed：压缩得很小；

ultra-condensed：压缩得特别小；

semi-condensed：从大到小逐步缩小；

semi-expanded：从小到大逐步变大；

expanded：拉伸文字；

extra-expanded：拉伸得很大；

ultra-expanded：拉伸得特别大。

PS：font-stretch是CSS2中所规定的属性，目前还没有浏览器可以支持该属性。

修饰

text-decoration: none | underline | overline | line-through | blink

none：默认值，无修饰样式；

underline：下划线；

overline：上划线；

line-through：贯穿线；

blink：闪烁。

阴影

text-shadow: none | color | length | length | length | inherit

none：不设置；

color：阴影的颜色；

length：长度值；

inherit：继承父级样式。

阴影有3个length要进行设置，分别是水平方向的距离、垂直方向的距离和模糊半径的长度(不能为负值)。

大小写转换

text-transform: capitalize | uppercase | lowercase | none | inherit

capitalize：首字母大写；

uppercase：变大写；

lowercase：变小写；

none：不改变；

inherit：继承。

间距－行间距

行间距：文本行与行之间的距离

line-height: normal | number | length | 百分数 | inherit

normal：默认值；

number：在当前文字大小的基础上再做增加来设置行高(不能为负值)；

length：指定行高数(不能为负值)；

百分数：用百分数表示行高；

inherit：继承。

行高是指上一行文字的基线与下一行文字之间的基线之间的距离，行高等于行间距加上文字高度。

间距－字间距

letter-spacing: normal | length | inherit

normal：默认值；

length：字间距的大小；

inherit：继承。

词间距

word-spacing: normal | length | inherit

normal：默认值；

length：词间距的大小；

inherit：继承。

文本样式

文字缩进

text-indent: length | 百分数 | inherit

length：缩进量；

百分数：父级元素的百分比；

inherit：继承。

水平对齐

text-align: left | right | center | justify | string | inherit

left：左对齐；

right：右对齐；

center：居中对齐；

justify：两端对齐；

string：字符对齐，多用于表格里；

inherit：继承。

垂直对齐

vertical-align: baseline | sub | super | top | text-top | middle | bottom | text-bottom | 百分数 | length | inherit

baseline：默认值，基线对齐；

sub：下标；

super：上标；

top：顶端对齐；

text-top：文本行顶端对齐；

middle：中间对齐；

bottom：底端对齐；

text-bottom：文本行底端对齐；

百分数：相对于父级元素的基线的百分比；

length：调整长度；

inherit：继承。

文字方向－文本流入方向

derection: ltr | rtl | inherit

ltr：left to right，默认值，从左到右流入；

rtl：right to left，从右到左流入；

inherit：继承。

文字方向－文字方向

unicode-bidi: normal | embed | bidi-override | inherit

normal：默认值，不打开流入的文字，对其文字不重排；

embed：打开流入的文字，在对象内部进行隐式重排；

bidi-override：严格按流入方向重排文字；

inherit：继承。

文字方向－竖排文字

layout-flow: horizontal | vertical-ideographic

horizontal：书写方向从左到右，由上而下；

vertical-ideographic：书写方向从上至下，由左至右。

空格处理

white-space: normal | pre | nowrap | inherit

normal：默认值，浏览器自动忽略多余的空格，连续多个空格只显示一个；

pre：类似于pre元素，浏览器不忽略源代码的空格；

nowrap：不自动换行；

inherit：继承。

词间换行

word-break: normal | break-all | keep-all

normal：默认值，对于英文则以单词为单位换行，对于中文则以字为单位换行；

break-all：英文以字母为单位换行；

keep-all：对于英文以单词为单位换行，对于中文则以标点或空格为单位换行。

首字样式

使用伪元素fitst-letter，对于英文则代表第一个字母，对于中文则代表第一个文字。

首行样式

使用伪元素first-line，设置第一行文字的样式。

颜色与背景样式

文本颜色：指文本的颜色。

color: 颜色 | inherit

颜色：使用指定颜色值；

inherit：继承。

背景色：指元素后面背景的颜色。

background: transparent | 颜色 | inherit

transparent：设置透明，默认值；

颜色：使用指定颜色值；

inherit：继承。

背景图片

background-image: none | url(路径) | inherit

none：无背景图片(默认值)；

url(路径)：图片的URL地址；

inherit：继承；

背景附件：指背景图片如何依附元素。

background-attachment: scroll | fixed | inherit

scroll：滚动，随内容滚动，默认值；

fixed：固定，不随内容滚动；

inherit：继承。

背景重复

background-repeat: repeat | no-repeat | repeat-x | repeat-y | inherit

repeat：重复，平铺图片，默认值；

no-repeat：不重复，不平铺图片；

repeat-x：水平方向重复；

repeat-y：垂直方向重复；

inherit：继承。

背景定位：背景图片的定位，要设置两个值，分别是相对于元素左上角的x轴和y轴，默认是0px。

background-position: top | center | bottom | left | right | 数值 | 百分数 | inherit

top：顶部；

center：中部；

bottom：底部；

left：左侧；

right：右侧；

数值：用数值指定图片的位置；

百分数：用百分数表示位置；

inherit：继承；

背景综合应用(可节省代码)

background: background-color | background-image | background-repeat | background-attachmen | background-position

background-color：颜色；

background-image：图片；

background-repeat：重复方式；

background-attachmen：附件；

background-position：定位。

CSS样式表存在形式有哪些,应用的侧重点分别是什么？

一共有三种 形式存在

第一种为标签样式，taglib为标签名，后面{}里面加属性,这种样式对页面内所有的标签名为taglibname的标签起作用。

第二种为css类样式，需要在HTML开始标签 后缀 class="name"，name即类名，这类标签对HTML内所有后缀同样name的标签起作用 class="name" 可以设在多个开始标签后，表示这些标签具有同一类样式。

第三种为cssID样式，需要在HTML开始标签后缀 id="id",需要注意的是，ID样式的话，每一个name都是独立且不重复的，具有唯一性。

希望我的回答对你有帮助

HTML + CSS 宝典（五. CSS基础----更多的样式）

使用cursor设置

也可以设置图片cursor:url()，图片格式必须为.ico或.cur。

可以用visibility来控制图标或字体的闪烁

img元素是属于HTML的概念

背景图属于css概念

所以img和背景图的使用主要取决于内容

默认情况下，背景图会在横坐标和纵坐标中进行重复

预设值：contain、cover，类似于object-fit

数值或百分比

设置背景图的位置

预设值：left、bottom、right、top、bottom

数值或百分比：数字可以是负数

雪碧图（精灵图）（spirit）: 需要小图标合并成一张大图片，大图片就是雪碧图

通常用它控制背景图是否固定。

fixed: 此时背景图是相对于视口的

CSS3 max/min-content及fit-content等width值理解

1. CSS2.1的尺寸体系

在CSS2.1的世界中，常见的尺寸分为这几类：

2.1 充分利用可用空间。例如，一些div元素默认宽度100%父元素，这种充分利用可用空间的行为就称为“fill-available”。

2.2 收缩与包裹。典型代表就是浮动，绝对定位以及inline-block，英文称为“shrink-to-fit”，直译为“收缩到合适”，这种直译往往都是不准确的，这种行为表现确实很难描述，有些只可意会不能言传的感觉，而我自己一直以“包裹性”作为理解。在CSS3中有个专有的关键名称，fit-content

2.3 收缩到最小。这个基本上就出现在table-layout为auto的表格中，想必有经验的小伙伴一定见过下面这样一柱擎天的盛况的吧！

大家空间都不够的时候，文字能断的就断，中文是随便断的，英文单词不能断。于是乎，第一列被无情地每个字都断掉，形成一柱擎天。这种行为称之为“preferred minimum width”或者“minimum content width”，也就是本文的重点角色之一min-content，换了一个更加规范好听的名字了。

2.4 超出容器限制 上面1~3情况，除非有明确的width相关设置，否则尺寸都不会主动超过容器宽度的，但是，存在一些特殊情况，例如，连续的英文数字，好长好长；或者内联元素被设置了white-space:nowrap，则表现为一江春水向东流

例如下面：

max-content的表现与之有些类似，具有收缩特性，同时最大内容宽度

2. 理解width:fill-available

width:fill-available比较好理解，比方说，我们在页面中扔一个没有其他样式的div元素，则，此时，该div元素的width表现就是fill-available，自动填满剩余的空间。也就是我们平常所说的盒模型的margin,border,padding的尺寸填充。

出现fill-available关键字值的价值在于，我们可以让元素的100%自动填充特性不仅仅在block水平元素上，其他元素，例如，我们一直认为的包裹收缩的inline-block元素上：

此时，元素兼具了块状元素的自动填充特性以及内联元素的定位对齐等特性(vertical-align/height/line-height)。于是，（例如）我们就可以直接使用line-height让一个块状表现的元素垂直居中

3. 理解width:max-content

max-content的行为表现可以这么理解，假设我们的容器有足够的宽度，足够的空间，此时，所占据的最大宽度是就是max-content所表示的尺寸。

会发现，width:max-content表现得好像设置了white-space:nowrap一样，文字一马平川下去，元素的宽度也变成了这些文字一行显示的宽度！为什么会这么表现呢？定义就是这样的，对吧，我们对照下， 首先，假设我们的容器有足够的空间，你想呀，容器足够空间，那下面的描述文字肯定会从左到右排列一行显示了，此时，上面的图片和下面的文字哪个内容宽度大？，自然是文字啦，所谓max-content就是width值采用宽度大的那个内容的宽度，也就是这里的文字的长度了

4. 理解width:min-content

min-content宽度表示的并不是内部哪个宽度小就是哪个宽度，而是，采用内部元素最小宽度值最大的那个元素的宽度作为最终容器的宽度。

首先，我们要明白这里的“最小宽度值”是什么意思。对于替换元素，例如图片的最小宽度值就是图片呈现的宽度，对于文本元素，如果全部是中文，则最小宽度值就是一个中文的宽度值；如果包含英文，因为默认英文单词不换行，所以，最小宽度可能就是里面最长的英文单词的宽度。So，大家明白的说

同样的是和display:inline-block做比较，display:inline-block虽然也具有收缩特性，但宽度随最大长度长的那一个（同时不超过可用宽度）。而width:min-content的最终宽度是图片和文字最小宽度值里面较大的那一个

5. 理解width:fit-content

width:fit-content也是应该比较好理解的，“shrink-to-fit”表现，换句话说，和CSS2.1中的float, absolute, inline-block的尺寸收缩表现是一样的

OK，然后，有小伙伴会疑问，既然跟很多CSS声明有一样的表现，那为什么还要再弄个新东西呢？

就拿水平居中效果举例，首先浮动肯定不行，因为只有左浮动和右浮动；绝对定位压根不占据空间，普通流中根本无法应用，而inline-block需要父级使用text-align:center，而本身可能还需要text-align:left略烦。

而width:fit-content可以没有这些烦恼，因为，width:fit-content可以实现元素收缩效果的同时，保持原本的元素block水平状态，于是，就可以直接使用margin:auto实现元素向内自适应同时的居中效果了。

css样式怎么写

css样式是HTML的一个补充，简单的css使用样式如下:

html

body

div id=div/div

/body

style type="text/css"

width:300px;//设置div的宽度300像素

height:500px;//设置div高度500像素

background-color:red;//设置div的背景颜色为红色

/style

/html

css代码位于style之间，详细的css代码解释见代码注释。

CSS样式分为哪三种？

CSS样式分为：内联式css样式、嵌入式css样式、外部式css样式。

对CSS三种样式定义及其实例：

内联式css样式。

内联式css样式表就是把css代码直接写在现有的HTML标签中，如下面代码：

1   p style="color:red"这里文字是红色。/p   

css样式代码要写在style=""双引号中，如果有多条css样式代码设置可以写在一起，中间用分号隔开（英文状态下;）。

嵌入式css样式。

嵌入式css样式，就是可以把css样式代码写在标签之间。如下面代码实现把三个标签中的文字设置为红色：

1   style type="text/css"span{color:red;}/style   

嵌入式css样式必须写在之间，并且一般情况下嵌入式css样式写在之间。

外部式css样式。

外部式css样式(也可称为外联式)就是把css代码写一个单独的外部文件中，这个css样式文件以“.css”为扩展名（也可以为调用其他网站CSS）。

1   link href="style.css" rel="stylesheet" type="text/css" /   

注意事项： 1、css样式文件名称以有意义的英文字母命名，如 main.css。 2、rel=”stylesheet” type=”text/css” 是固定写法不可修改。 3、标签位置一般写在标签之内。

掌握好三种CSS三种样式使用方法在Web开发中将节省很多时间。

标题名称：cssfit样式的简单介绍
转载来于：http://sczitong.cn/article/dsihdge.html