常用CSS样式

最新推荐文章于 2024-03-08 14:14:04 发布

江江呀

最新推荐文章于 2024-03-08 14:14:04 发布

阅读量249

点赞数 2

分类专栏： JAVA

本文链接：https://blog.youkuaiyun.com/qq_40671789/article/details/100147470

版权

JAVA 专栏收录该内容

24 篇文章

订阅专栏

一、1、样式表的引入与使用
（1）链入外部样式表文件

<head>
<link rel=stylesheet href="CSS文件URL" type="text/css"/>
</head>

（2）定义内部样式块对象

<head>
<style type="text/css">
body	{ font: 10pt "宋体" }
p		{ font: 10pt "Arial"; color: black }
……各种所需的样式定义
</style>
</head>

（3）内联样式定义

例：<p style="margin-left: 0.5in">文本</p>

（4）样式定义语法

     选择符  { 属性1: 值1; 属性2: 值2; ……; 属性n: 值n }

（5）优先级（从高到低）：内联样式、内部样式、外部样式。
二、常用选择符类型
（1）通配选择符

例：*  { font-family: 宋体; text-align: center }

（2）类型选择符

例：td  { text-align: center; vertical-align: middle }

（3）类选择符（class选择符）

定义例：.list-title  { font-size: 20px; color: red }
使用例：<p class=”list-title”>文字</p>

（4）id选择符

定义例：#course-name  { font-size: 20px; color: red }
使用例：<p id=”course-name”>文字</p>

（5）选择符分组（多个选择符使用相同的样式定义）

例：td, a, #course-name, .list-title   { font-size: 20px; color: red }

（6）子对象选择符

例：td>p  { font-size: 20px; color: red }

注：<td>对象的所有子对象<p>才使用该样式
（7）包含选择符

例：td  div  { font-size: 20px; color: red }

注：<td>对象的所有子孙后代<p>对象才使用该样式
（8）多种类型的选择符可以组合使用

例：#list-div  div > .emp-text  { font-size: 20px; font-weight: bold }

注：ID为list-div的对象的子孙中标记为<div>的元素的子对象中，class为emp-text的元素才使用该样式。

（9）选择符优先级（从高到低）：id选择符、class选择符、类型选择符、通配选择符。

（10）选择符定义时共享样式的一般原则

几乎全部标记都用的共性样式用通配选择符；
同一类型的多数标记都用的共性样式用类型选择符；
多数标记都用的共性样式用class选择符；
单个标记独用的个性样式用id选择符。

3、字体属性

font-style：字体样式，normal为标准样式（默认），italic为斜体。

font-weight：字体粗细，normal为标准粗细（默认），bold为粗体。

font-size：字体大小，带单位（px、pt、cm、mm等，2.54cm=72pt）。

font-family：字体名称，按优先顺序排列，以逗号隔开。如果字体名称包含空格，则应使用引号括起。

font：font-style   font-weight   font-size   font-family

color：文字颜色。

text-decoration：字体修饰，none为无修饰（默认），underline为下划线，overline为上划线，line-through为贯穿线。

4、文本

text-overflow：文本溢出的处理，clip为裁剪，ellipsis为显示省略号。

text-align：水平对齐方式，常用值left、right、center、justify。

vertical-align：垂直对齐方式，常用值top、middle、bottom等。

white-space：normal——默认，文本自动换行；nowrap——强制不换行。

5、尺寸

width：宽度。height：高度。

6、边框

border-width：边框粗细，常用值medium、thin、thick、数值和单位等。

border-style：边框样式，常用值none、dotted、solid等。

border-color：边框颜色。

border：border-width   border-style   border-color

定义属性值的形式：四框、上下  左右、上  右  下  左。

7、背景

background-color：背景颜色，取值transparent（默认）、颜色表示。

background-image：背景图像，取值none（默认，无背景图像）、url(“图像URL”)。

background-repeat：背景重复方式，取值repeat（默认，重复）、no-repeat（不重复）等。

background-attachment：scroll——随对象内容滚动，fixed——固定背景。

background-position：背景位置，取值：横坐标  纵坐标，每个坐标可以是百分数、数值合单位、center、只能用于纵坐标的top和bottom、只能用于横坐标的left和right。

background：background-color   background-image   background-repeat   background-attachment   background-position

8、定位

position：static（默认，无特殊定位）、absolute（绝对定位）、relative（相对定位）。

left：左坐标。top：上坐标。right：右坐标。bottom：下坐标。z-index：层叠顺序。

9、外补丁

margin-top、margin-right、margin-bottom、margin-left、margin。

10、内补丁

padding-top、padding-right、padding-bottom、padding-left、padding。

11、布局

display：block（块对象，对象后添新行）、none（隐藏对象）。

visibility：inherit（默认，继承父对象可见性）、visible（可见）、hidden（隐藏）。

overflow：溢出处理，visible（默认，不剪裁不滚动）、auto（必要时剪裁或显示滚动条）、hidden（不显示超出部分）、scroll：总显示滚动条。

float：none（默认，对象不漂移）、left（文本流向对象的右边）、right（文本流向对象的左边）。

clear：none（默认，允许两边都有浮动对象）、left（不允许左边有浮动对象）、right（不允许右边有浮动对象）、both（不允许有浮动对象）。

12、列表

list-style-image：项目符号图像，none（默认）、url(“图像URL”)。

list-style-type：项目符号类型，disc（默认，实心圆）、circle、square、decimal、lower-roman、upper-roman、lower-alpha、upper-alpha、none等。

list-style：list-style-image   list-style-type

13、其他
cursor：光标形状，auto（默认，自动确定）、all-scroll、col-resize、crosshair、default、hand、move、help、no-drop、not-allowed、pointer、progress、row-resize、text、vertical-text、wait、url(url)等。