02. CSS 样式

CSS字体 - font

CSS文本 - text

  • 水平对齐：text-align : left/center/right;

CSS背景 - background

CSS列表 - list-style

CSS表格

  • 垂直对齐 vertical-align : top/center/bottom;

CSS轮廓 - outline

标签显示模式 - display

  • 块和内联元素

内容溢出盒子 - overflow

图像透明

鼠标光标类型

IE 兼容性问题

一、CSS字体 - font

(1) 字体系列：

font-family : "宋体","微软雅黑";
/* 如果浏览器不支持第一个字体，则会尝试下一个*/

  • San-serif（字体外观很清晰)

  • Serif（高雅、传统）

  • Monospace（好像打字机打出来的）

  • Cursive（有趣、有风格的）

  • Fantasy（有趣、有风格的）

五种字体系列，最好有至少一个字体和通用字体系列名。

font-family:Verdana,Geneva,sans-serif;

  • 会先检查浏览器是否有前面2种字体，如果都没有就会使用默认的sans-serif字体

(2) 字体风格：

font-style : normal/italic/oblique;
/*
- normal：标准
- italic：斜体
- oblique：倾斜
*/

(3) 字体粗细：

font-weight : 400;
/* 加粗度：100,200,300,400,500,600,700,800,900 */
/* normal=400 | blod=700 */
/* bolder：更粗 | lighter：更细*/

(4) 字体大小：

font-size : px/em/%

(5) font简写属性：

font-style --> font-variant --> font-weight --> font-size/line-height --> font-family

注意：

  • ！英文字体名一般不需要加引号，设置英文字体名必须位于中文字体名之前；
  • ！加粗度没有单位，而且x00只有9个值，不存在123这种值；
  • ！网页普遍是14px；尽量设偶数px，奇数px在IE6存在bug；

二、CSS文本 - text

(1) 文本缩进：

text-indent : em/px/%;

(2) 水平对齐：

text-align : left/center/right;

(3) 单词间隔（只适用于英文）:

word-spacing : em/px;

(4）字符间隔（中文字间距使用这个）：

letter-spacin : em/px;

(5) 文本修饰：

用来设置或删除文本的修饰，从设计角度来讲该属性主要是用来删除超链接的下划线

text-decoration : none/underline/overline/line-through/blink;
/* 
- none：无
- underline：下划线
- overline：上划线
- line-through：穿过一条线
- blink：闪 // 所有浏览器都不支持
*/

(6) 行高：

line-height : px/em/%;  
/* 一般文本行高比字号大7-8像素即可 */

(7) 【CSS3】文本阴影：

text-shadow : 水平位置 垂直位置 模糊偏移 阴影颜色;

(8)【CSS3】颜色透明度：

rgba(0~255, 0~255, 0~255, 0~1);
/* 模糊度：0~1 */

三、CSS背景 - background

  • background 属性用于定义 HTML 元素的背景

(1) 背景色：

body{   // 页面的背景颜色可以使用 body 元素选择器进行定义
    background-color:gray;
}

(2) 背景图：

  • background-image 属性描述了元素的背景图像。默认情况下，背景图像进行平铺重复显示，以覆盖整个元素实体。

body{
    background-image:url('images/wallpaper.jpg');
}

(3) 背景平铺：

  • 默认情况下，background-image 属性会在页面的水平或者垂直方向平铺。一些图像如果在水平方向与垂直方向平铺，这样看起来很不协调，如果图像只在水平方向平铺 (repeat-x), 页面背景会更好些：background-repeat:repeat-x，定义垂直方向平铺语法：background-repeat:repeat-y。

  • 在使用背景图像时，默认会平铺重复显示，这样不仅不具有美感，还会影响文本的排版。如果不想让图像平铺，并且只显示一次，那么就这样定义：background-repeat:no-repeat。

(4) 背景定位：

background-position : X坐标/位置 Y坐标/位置;
/* 坐标：px/em/% */
/* 位置：top，bottom，center，left，right； 
   若只设了一个值，那么第二个值将是center； */

<!DOCTYPE html>
<html>
<head>
<style>
body{
    background-image:url('https://raw.githubusercontent.com/zheng782912/JavaScript-Notes/master/images/total/background.jpg');
    background-repeat:no-repeat;
    background-position:200px 250px;    // 水平方向位置是200px，垂直方向位置250px
}
</style>
</head>
<body>
<h1 class="center col">class 选择器</h1>
<p class="center col">我是一个段落。</p>
<p class="center col font">我是另一个段落。</p>
<h2 class="center">h2 标题</h2>
</body>
</html>

(5) 背景图像设置固定或滚动：

backgrount-attchment : fixed/scroll;
/*
- scroll：默认值。背景图像会随着页面其余部分的滚动而移动；
- fixed：图像固定；当页面的其余部分滚动时，背景图像不会移动；
*/

<!DOCTYPE html>
<html>
<head>
<style>
body{
    height:2000px;
    background-image:url('https://raw.githubusercontent.com/zheng782912/JavaScript-Notes/master/images/total/background.jpg');
    background-repeat:no-repeat;
    background-attachment:fixed;
}
</style>
</head>
<body>
<p>我是一个段落,我是一个段落</p>
<p>我是一个段落,我是一个段落</p>
<p>我是一个段落,我是一个段落</p>
<p>我是一个段落,我是一个段落</p>
<p>我是一个段落,我是一个段落</p>
<p>我是一个段落,我是一个段落</p>
<p>我是一个段落,我是一个段落</p>
<p>我是一个段落,我是一个段落</p>
<p>我是一个段落,我是一个段落</p>
<p>我是一个段落,我是一个段落</p>
<p>我是一个段落,我是一个段落</p>
<p>我是一个段落,我是一个段落</p>
<p>我是一个段落,我是一个段落</p>
<p>我是一个段落,我是一个段落</p>
<p>我是一个段落,我是一个段落</p>
<p>我是一个段落,我是一个段落</p>
<p>我是一个段落,我是一个段落</p>
<p>我是一个段落,我是一个段落</p>
<p>我是一个段落,我是一个段落</p>
<p>我是一个段落,我是一个段落</p>
<p>我是一个段落,我是一个段落</p>
</body>
</html>

(6) 背景属性简写：

background:green url('images/fix.gif') no-repeat fixed 12px 24px;

  • 当使用简写属性时，属性值的顺序依次为：

    background-color --> background-image --> background-repeat --> background-attachment --> background-position

(7)【CSS3】背景尺寸：

background-size : contain/cover;
/*
- contain：保证背景图片完整性；
- cover：保证背景图片完全覆盖整个区域；
- width&height：设置背景的宽&高；（一般设置1个参数，设置2个参数会导致图片变形）
*/

四、CSS列表 - list-style

(1) 列表项标志：

list-style-type : none/disc/circle/square/decimal...;
/* 
none：无    // 通常都需要隐藏标记
disc：实心圆
circle：空心圆
square：实心方块
decimal：数字
*/

(2) 图像作为列表项标记：

list-style-image : url();

(3) 列表项标记的位置：

list-style-position : inside/outside;
/*
outside：默认值。保持标记位于文本的左侧。列表项目标记放置在文本以外，且环绕文本不根据标记对齐。
inside：列表项目标记放置在文本以内，且环绕文本根据标记对齐。
*/

(4) 列表综合设置：

list-style : image type position;

五、CSS表格

(1) 折叠边框

border-collapse : collapse;

(2) 水平对齐

text-align : left/center/right;

(3) 垂直对齐

vertical-align : top/center/bottom;

(4) 空单元格显示/隐藏

empty-cells : show/hide;

(5) 表格标题在上/在下

caption-side : top/bottom;

六、CSS轮廓 - outline

(1) 轮廓颜色：

outline-color : rgb()

(2) 轮廓样式：

outline-style : solid/dotted/dashed/double...;
/*
- soild：实线
- dotted：点线
- dashed：虚线
- double：双实线
*/

(3) 轮廓宽度：

outline-width : thick/medium/thin/px;
/*
- thick：粗
- medium：中
- thin：细
*/

(4) 轮廓综合设置：

outline : color style width;

七、标签显示模式

CSS Display（显示） 和 Visibility（可见性）:

display 属性设置一个元素应如何显示，visibility 属性规定一个元素是否可见。

(1)、隐藏元素：display:none 或 visibility:hidden

  • 隐藏一个元素可以通过把 display 属性设置为 "none"，或把 visibility 属性设置为"hidden"。但是请注意，这两种方法会产生不同的结果。

  • visibility:hidden 可以隐藏某个元素，但隐藏的元素仍需占用与未隐藏之前一样的空间。也就是说，该元素虽然被隐藏了，但仍然会影响布局。

    • 该属性的默认值是 visible 元素是可见的。值为 hidden 则元素是不可见的。即使不可见的元素也会占据页面上的空间。值为 collapse 时，当在表格元素中使用时，此值可删除一行或一列，但是它不会影响表格的布局。被行或列占据的空间会留给其他内容使用。如果此值被用在其他的元素上，会呈现为 "hidden"。

  • display:none 可以隐藏某个元素，且隐藏的元素不会占用任何空间。也就是说，该元素不但被隐藏了，而且该元素原本占用的空间也会从页面布局中消失。

    • 该属性的默认值为 inline 此元素会被显示为内联元素，元素前后没有换行符。值为 none 此元素不会被显示。值为 block 此元素将显示为块级元素，此元素前后会带有换行符。值为 inline-block 表示行内块元素。该属性也有多个值可用于表格设置。

(2)、CSS Display - 块和内联元素

块级元素在浏览器显示时，通常会以新行来开始（和结束），块状元素排斥其他元素与其位于同一行，可以设定元素的宽和高以及内外边距，块级元素一般是其他元素的容器，可以容纳内联元素和其他块元素。常见的块级元素有： <h1> - <h6>, <div>，<p>, <pre>，<hr>，<ul>, <ol>，<dl>，<from>，<table>，<menu>。

内联元素在显示时通常不会以新行开始，不可以设置宽和高，但可以设置与其他内联元素位于同一行，高度由元素内部的文字大小决定，宽度由内容的长度决定，内联元素一般不能包含块级元素，内联元素只能容纳文本或者其他内联元素。常见的内联元素有：<a>, <span>，<img>，<br>，<input>，<textarea>，<strong>，<em>，<mark>，<i>，<small>。

可以更改内联元素和块元素，反之亦然，可以使页面看起来是以一种特定的方式组合，并仍然遵循 Web 标准。

display 描述
none 不显示
block 块级元素
inline 行内元素
inline-block 行内块元素

注意：一个内联元素设置为 display:block 是不允许有它内部的嵌套块元素。

八、内容溢出盒子

overflow 描述
visible 默认值。内容溢出部分显示在盒子外；
hidden 隐藏内容溢出部分
scroll 如果内容溢出会被修剪，则浏览器会显示滚动条以便查看其余的内容；
auto 如果内容溢出被修剪，则浏览器会显示滚动条以便查看其余的内容；

九、图像透明

opacity:0~1;
filter:alpha(opacity=0~100); /* 针对 IE8 以及更早的版本 */
// 两个都写可以兼容任意浏览器

十、鼠标光标类型 cursor

下拉菜单按钮使用了 cursor 属性，该属性主要用于指定鼠标光标的类型，即鼠标指针放在一个元素边界范围内时所用的光标形状。

下表列出了该属性所有的值： 鼠标可移入对应的属性值，查看光标的形状。

值 说明
URL 需要使用的自定义光标的 URL。注意：在此列表的末端始终定义一种普通的光标，以防没有由 URL 定义的可用光标。
default 默认光标，通常是一个箭头。
auto 默认，浏览器设置的光标。
pointer 光标显示为指示链接的指针，即一只手。
text 此光标指示文本。
wait 此光标指示程序正忙，显示为一个转动的蓝色小圆圈。
help 此光标指示可用的帮助，显示为一个箭头右下角带有问号。
crosshair 光标显示为十字线。
move 此光标指示某对象可被移动。

十一、IE 兼容性问题，使用技巧

(1) 在IE6下高度小于19px的元素，高度会被当做19px来处理

  • 解决：overflow：hidden； 超出的部分隐藏

(2) 图片下方间隙问题

  • display:block; (改变标签本身特性) // 有局限性，如果有好几个图片就无法同一行显示了。

  • overflow:hidden; (必须知道图片高度)

  • vertical-align (暂时最完美的方案) // vertical-align:top;

(3) li 问题

  • IE6 IE7 下 li 本身没有浮动，但是内容浮动了 li 下就会产生几px的间隙。// 给li加vertical-align:top；

posted @ 2019-07-16 12:18  胤小飞  阅读(182)  评论(0)    收藏  举报