CSS 基本样式规则

合集下载

CSS样式规则及字体样式

}
字体样式应用：
<!DOCTYPE html> <html lang="en"> <head>
<meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>字体属性</title> <style>
可以通过escape() 来测试属于什么字体。
字体名称
英文名称
Unicode 编码
宋体
SimSun
\5B8B\4F53
新宋体
NSimSun
\65B0\5B8B\4F53
黑体
SimHei
\9ED1\4F53
微软雅黑
Microsoft YaHei \5FAE\8F6F\96C5\9ED1
楷体_GB2312 KaiTi_GB2312 \6977\4F53_GB2312
p{ font-family:"微软雅黑";}
可以同时指定多个字体，中间以逗号隔开，表示如果浏览器不支持第一个字体，则会尝试下一个，直到找到合适的字体。
常用技巧：
1. 现在网页中普遍使用14px+。 2. 尽量使用偶数的数字字号。ie6等老式浏览器支持奇数会有bug。 3. 各种字体之间必须使用英文状态下的逗号隔开。 4. 中文字体需要加英文状态下的引号，英文字体一般不需要加引号。当需要设置英文字体时，英文字体名必须位于中文字体名之前。 5. 如果字体名中包含空格、#、$等符号，则该字体必须加英文状态下的单引号或双引号，例如font-family: "Times New Roman";。 6. 尽量使用系统默认字体，保证在任何用户的浏览器中都能正确显示。

css样式的书写顺序及原理

css样式的书写顺序及原理刚开始学习前端的时候，每次写css样式都是⽤到什么就在样式表后添加什么，完全没有考虑到样式属性的书写顺序对⽹页加载代码的影响。

后来逐渐才知道正确的样式顺序不仅易于查看，并且也属于css样式优化的⼀种⽅式。

那么是怎么个顺序呢？（1）定位属性：position display float left top right bottom overflow clear z-index（2）⾃⾝属性：width height padding border margin（3）⽂字属性：font-family font-size font-style font-weight font-varient color text-align vertical-align word-spacing white-space text-overflow（4）背景：background border（5）css3中新增属性：content box-shadow border-radius transform……按照上述1 2 3 4 5的顺序进⾏书写。

⽬的：减少浏览器reflow（回流），提升浏览器渲染dom的性能原理：浏览器的渲染流程为——①解析html构建dom树，解析css构建css树：将html解析成树形的数据结构，将css解析成树形的数据结构②构建render树：DOM树和CSS树合并之后形成的render树。

③布局render树：有了render树，浏览器已经知道那些⽹页中有哪些节点，各个节点的css定义和以及它们的从属关系，从⽽计算出每个节点在屏幕中的位置。

④绘制render树：按照计算出来的规则，通过显卡把内容画在屏幕上。

css样式解析到显⽰⾄浏览器屏幕上就发⽣在②③④步骤，可见浏览器并不是⼀获取到css样式就⽴马开始解析⽽是根据css样式的书写顺序将之按照dom树的结构分布render样式，完成第②步，然后开始遍历每个树结点的css样式进⾏解析，此时的css样式的遍历顺序完全是按照之前的书写顺序。

单元5 CSS3基本样式设计

border-right-style border-right-width border-right-color
border-left-style border-left-width border-left-color
示例： h1{ border-bottom-style: solid; border-bottom-color: #000; border-bottom-width: 1px;
常用的样式有 dotted（点线）
solid（实线）
border-style属性
border-style属性取值可以有一到四个
border-style: dotted solid double dashed；
上
右
下
左
border-style: dotted solid double；
上
右和左下
</head> <body>
<h1>勤学好问</h1> </body> </html>
文本样式属性
文字的颜色以及文本格式的样式效果
color text-align text-decoration text-indent line-height
文本样式属性
color属性用于设置文字的颜色
常用颜色值 1. CSS颜色规范预定义的颜色名称，例如red，blue，green等。 2. 十六进制颜色代码：#RRGGBB，其中RR（红色），GG（绿色）和BB（蓝色），
字体样式属性
font-style属性用于规定斜体文本 <!DOCTYPE html> <html>
<head> <meta charset="utf-8"> <title>字体样式</title> <style type="text/css"> p{font-style: italic;} </style>

六、CSS入门

六、CSS⼊门CSS核⼼基础CSS样式规则选择器{属性1:属性值1; 属性2:属性值2; 属性3:属性值3;}CSS代码结构中的特点CSS样式中的选择器严格区分⼤⼩写，属性和值不区分⼤⼩写，按照书写习惯⼀般将“选择器、属性和值”都采⽤⼩写的⽅式。

多个属性之间必须⽤英⽂状态下的分号隔开，最后⼀个属性后的分号可以省略，但是，为了便于增加新样式最好保留。

如果属性的值由多个单词组成且中间包含空格，则必须为这个属性值加上英⽂状态下的引号。

在编写CSS代码时，为了提⾼代码的可读性，通常会加上CSS注释。

在CSS代码中空格是不被解析的，花括号以及分号前后的空格可有可⽆。

属性和属性值之间不允许出现空格，否则浏览器会报错引⼊CSS样式表优先级：如果三种样式同时控制我们的内容：⾏内优先级最⾼外部样式，内部样式：谁离着内容近，谁优先级⾼1、⾏内式⾏内式也称为内联样式，是通过标记的style属性来设置元素的样式<标记名 style="属性1:属性值1; 属性2:属性值2; 属性3:属性值3;"> 内容 </标记名>style是标记的属性，实际上任何HTML标记都拥有style属性，⽤来设置⾏内式。

其中属性和值的书写规范与CSS样式规则相同，⾏内式只对其所在的标记及嵌套在其中的⼦标记起作⽤。

2、内嵌式内嵌式是将CSS代码集中写在HTML⽂档的<head>头部标记中，并且⽤<style>标记定义<style>标记定义，其基本语法格式如下：<head><style type="text/css">选择器 {属性1:属性值1; 属性2:属性值2; 属性3:属性值3;}</style></head><style>标记⼀般位于<head>标记中<title>标记之后，也可以把他放在HTML⽂档的任何地⽅。

CSS样式规则定义对话框中英文对照

CSS样式规则定义对话框中英文对照CSS（Cascading Style Sheets）样式规则定义对话框中有很多常用的属性和值，它们可以帮助我们控制对话框的外观和行为。

以下是一些常用的CSS样式规则定义对话框的属性和值，以及它们的中英文对照。

1. Positioning（定位）:- position (定位方式)- top (顶部距离)- right (右侧距离)- bottom (底部距离)- left (左侧距离)- z-index (堆叠顺序)2. Box Model（盒模型）:- width (宽度)- height (高度)- margin (外边距)- padding (内边距)- border (边框)3. Typography（文本样式）:- font-family (字体)- font-size (字体大小)- font-weight (字体粗细)- font-style (字体样式)- color (文字颜色)- text-align (对齐方式)- text-decoration (文本装饰)4. Background（背景）:- background-color (背景颜色)- background-image (背景图片)- background-size (背景图片大小)- background-repeat (背景图片重复)5. Box Shadow（阴影）:- box-shadow (盒子阴影)- text-shadow (文字阴影)6. Transition（过渡效果）:- transition-property (过渡的属性)- transition-duration (过渡的时间)- transition-delay (过渡的延迟时间)- transition-timing-function (过渡的时间函数)7. Animation（动画效果）:- animation-name (动画名称)- animation-duration (动画时间)- animation-delay (动画延迟时间)- animation-iteration-count (动画循环次数) - animation-direction (动画方向)8. Border Radius（边框圆角）:- border-radius (边框圆角)9. Display（显示方式）:- display (显示方式)- visibility (可见性)- opacity (透明度)10. Flexbox（弹性盒子）:- display: flex (显示为弹性盒子)- flex-grow (弹性增长因子)- flex-shrink (弹性收缩因子)- flex-basis (弹性基准)- flex-direction (弹性盒子的排列方向)- justify-content (主轴对齐方式)- align-items (侧轴对齐方式)以上是一些常用的CSS样式规则定义对话框的属性和值，以及它们的中英文对照。

CSS常用样式属性大全

CSS常用样式属性大全1. 文本样式- `font-size`: 设置字体大小- `font-family`: 设置字体类型- `font-weight`: 设置字体粗细- `color`: 设置字体颜色- `text-decoration`: 设置文本修饰，如下划线、删除线等- `text-align`: 设置文本对齐方式- `text-transform`: 设置文本大小写转换2. 背景样式- `background-color`: 设置背景颜色- `background-image`: 设置背景图片- `background-size`: 设置背景图片大小- `background-position`: 设置背景图片位置- `background-repeat`: 设置背景图片重复方式3. 边框样式- `border`: 设置边框样式、宽度和颜色- `border-radius`: 设置边框圆角- `border-width`: 设置边框宽度- `border-color`: 设置边框颜色4. 尺寸和布局样式- `width`: 设置元素宽度- `height`: 设置元素高度- `margin`: 设置元素外边距- `padding`: 设置元素内边距- `display`: 设置元素的显示方式5. 盒模型样式- `box-sizing`: 控制盒模型的计算方式- `overflow`: 设置内容溢出时的处理方式6. 定位样式- `position`: 设置元素的定位方式- `top`: 设置元素离顶部的距离- `left`: 设置元素离左边的距离- `right`: 设置元素离右边的距离- `bottom`: 设置元素离底部的距离7. 动画样式- `transition`: 设置元素的过渡效果- `animation`: 设置关键帧动画效果以上是CSS常用的样式属性，通过调整这些属性，您可以灵活地控制网页的样式和布局。

css样式基本语法

css样式基本语法1. 基本语法CSS的定义是由三个部分构成：选择符（selector），属性（properties）和属性的取值（value）。

基本格式如下：selector {property: value}（选择符 {属性：值}）选择符是可以是多种形式，⼀般是你要定义样式的HTML标记，例如BODY、P、TABLE……，你可以通过此⽅法定义它的属性和值，属性和值要⽤冒号隔开：body {color: black}选择符body是指页⾯主体部分，color是控制⽂字颜⾊的属性，black是颜⾊的值，此例的效果是使页⾯中的⽂字为⿊⾊。

如果属性的值是多个单词组成，必须在值上加引号，⽐如字体的名称经常是⼏个单词的组合：p {font-family: "sans serif"}（定义段落字体为sans serif）如果需要对⼀个选择符指定多个属性时，我们使⽤分号将所有的属性和值分开：p {text-align: center; color: red}（段落居中排列；并且段落中的⽂字为红⾊）为了使你定义的样式表⽅便阅读，你可以采⽤分⾏的书写格式：p { text-align: center; color: black; font-family: arial }（段落排列居中，段落中⽂字为⿊⾊，字体是arial）2. 选择符组你可以把相同属性和值的选择符组合起来书写，⽤逗号将选择符分开，这样可以减少样式重复定义：h1, h2, h3, h4, h5, h6 { color: green }（这个组⾥包括所有的标题元素，每个标题元素的⽂字都为绿⾊）p, table{ font-size: 9pt }（段落和表格⾥的⽂字尺⼨为9号字）效果完全等效于：p { font-size: 9pt } table { font-size: 9pt } 3. 类选择符⽤类选择符你能够把相同的元素分类定义不同的样式，定义类选择符时，在⾃定类的名称前⾯加⼀个点号。

CSS样式基础知识

#IDname{property:value……}
定义了ID样式后，需要在引用该样式的标记符内使用id属性。例如，可以定义一个ID样式如
下：#red{color:red}
然后可以存若干丌同的HTML标记符中使用该样式规则,如下所示：
<p id="red">本行文字为红色。</p> <h1 id="red">本标题红色。</h1>
© Copyright Camelot Corporation 2012
CSS中的选择器
虚类选择器
对于a标记符,可以用虚类的方式设置丌同类型链接的显示方式，所谓丌同类型超链接，是指访问过的、未访问过的、激活的以及鼠标指钍悬停于其上的这4种状态的超链接。可以通过指定下列选择器乊一设置超链接样式： a:link戒:link当超链接没被访问过时，所设置的样式应用于超链接。 a:visited戒:visited当超链接已被访问过时，所设置的样式应用于超链接。 a:active戒:active当超链接当前为被选中状态时，所设置的样式应用于超链接。 a:hover戒:hover当鼠标指针移动到超链接乊上时，所设置的样式应用于超链接。
优势
在于把内容和格式分离开，使得能够用一种统一的方式来管理各种丌同的显示格式。语法 Selector { property: value }
Selector -- 选择符
property : value -- 样式表定义。属性和属性值乊间用冒号(:)隔开。多个定义乊间用分号(;)隔开
© Copyright Camelot Corporation 2012
© Copyright Camelot Corporation 2012

1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。

<html><head><title>设置字号的绝对大小</title><style type="text/css">  <html><head><title>设置字号的相对大小</title> <style type="text/css">  </style> </head> <body> <p>设置字号的相对大小</p>
1.CSS文字样式
文字大小:font-size
英寸(in)
厘米(cm) 毫米(mm) 磅(pt)
字体高(em) 字母x的高(ex)
像素(px)
百分比(%)
1.CSS文字样式
文字大小:font-size 语法说明：
• 绝对大小：是以pt为单位，以绝对大小的方式来设置字号。可以指定关键字来指定大小，如： font-size属性的关键字（ xxsmall | x-small | small | medium | large | x-large | xx-large ）。不过这些关键字，在不同的设备下，可能会显示不同的字号。
文字样式 : font-style属性来达到字体变化的效果。
基本语法： • font-style:normal | italic | oblique 语法说明： • normal 为默认值，一般以浏览器默认的字体来显示，italic为斜体效果，oblique为歪斜体效果。
1.CSS文字样式
文字加粗 : font-weight 属性来设置字体的粗细。
letter-spacing字符间距
letter-spacing
• letter-spacing 字符间距属性，可以设置字符与字符间的距离。
基本语法
• letter-spacing：normal | 长度单位
语法说明：
• normal 表示默认值，此处的长度单位可使用负数
实例
line-height行距属性
文字下划线等效果 : text-decoration 属性，主要完成文字加下划线、顶线、删除线及文字闪烁效果。
font设置综合字体属性
font 属性是一种复合属性，可以同时对文字设置多个属性。包括字体族科、大小、风格、加粗及字体变体。
基本语法： • font: font-style font-weight font-variant font-size/line-height font-family 语法说明： • 如果要利用 font 属性，同时设置多个文字属性时，属性与属性之间必须利用空格隔开； • 前三个属性次序不定或者省略，默认为normal； • 大小和字体系列必须显式地指定，先设置大小，再设置字体系列，字体系列如果有多个，以逗号分割； • 行高必须直接出现在字体大小后面，中间用斜杠分开，行高是可选的属性； • font属性是继承的。
.p5 {font-size:large}
.p6 {font-size:x-large} --> </style></head><body>
<p class="p1">设置字号为xx-small</p>
<p class="p2">设置字号为x-small</p> <p class="p3">设置字号为small</p> <p class="p4">设置字号为medium</p> <p class="p5">设置字号为large</p>
• font-family:字体一，字体二，字体三… 语法说明： • 上面的语法定义了几种不同的字体，并用逗号隔开，当浏览器找不到字体一时，将会用字体二代替，以此类推，当浏览器完全找不到字体时，则使用默认字体（宋体）。
 <html> <head><title>设置字体</title> <style type="text/css"> <!-.p1 {font-size:16px; font-family:黑体,草书,宋体;} .p2 {font-size:16px; font-family:琥珀,草书,宋体;} --> </style></head><body> <p class="p1">设置字体的顺序为，黑体，草书，宋体
<p class="p2">本行文字以黑体斜体25像素大小加粗来显示</p>
</body></html>
2.模拟GOOGLE公司LOGO实例
<html> <head>
Span没有结构上的意义，纯粹是应用样式， <title>Google</title> 当其他行内元素都不合适时，就可以用它。 <style>
Vertical-align垂直对齐
text-align属性可以控制段落文字的垂直对齐方式，对于文字本身而言，该属性对于块级元素并不起作用，但对于表格而言，这个属性很重要。
基本语法： • Vertical-align：top | bottom | middle |
text-transform转换英文大小写
 <html> <head><title>font字体设置</title> <style type="text/css">
<!-.p1{ font-family:黑体; font-size:25px;font-weight:bolder;} .p2{ font:italic 25px 黑体;} --> </style></head> <body> <p class="p1">本行文字以黑体25像素大小加粗来显示</p>
基本语法： • font-weight ： normal | blod | bolder | lighter | 100-900 语法说明： • normal 表示默认字体， bold 表示粗体， bolder表示粗体再加粗，lighter表示比默认字体还细， 100-900 共分为九个层次（ 100 、 200…… 、 900 ），数字越小字体越细、数字越大字体越粗。
第十章用CSS美化页面元素
用CSS设置丰富的文字效果

CSS文字样式模拟Google公司Logo实例 CSS段落文字搜索实例1.CSS文字样式

字体文字大小文字颜色文字粗细斜体变体文字的下划线综合字体
1.CSS文字样式
字体:font-family 除了利用HTML的标记来设置字体外，也可以用CSS的font-family属性来设置需要的字体。基本语法：
实例
text-align水平对齐
text-align属性可以控制文字段落的水平对齐方式。
基本语法： • text-align ： left | right | center | justify 语法说明： • left为默认值，right表示右对齐，center表示居中对齐，justify表示左右对齐。
1.CSS文字样式
文字变体: font-variant，CSS中的字体变体主要用于设置英文字体。
基本语法： • font-variant:normal | small-caps 语法说明： • normal 表示默认值， small-caps 表示英文字体显示为小型的大写字母。
1.CSS文字样式
<!-p{ font-size:80px; letter-spacing:-2px; /* 字母间距 */ font-family:Arial, Helvetica, sans-serif; } .g1, .g2{ color:#184dc6; } .o1, .e{ color:#c61800; } .o2{ color:#efba00; } .l{ color:#42c34a; } --> </style> </head> <body> <p><span class="g1">G</span><span class="o1">o</span> <span class="o2">o</span><span class="g2">g</span> <span class="l">l</span><span class="e">e</span></p> </body> </html>