外链式样式表_WEB前端 CSS样式表
CSS层叠样式表
字体样式属性
font-size:字号大小
页中普遍使用14px+。
尽量使用偶数的数字字号。ie6等老式浏览器支持奇数会有bug。
font-family:字体
中文字体需要加引号,英文则不需要
如果字体名中包含空格、#、$等符号,则该字体必须加英文状态下的单引号或双引号
尽量使用系统默认字体,保证在任何用户的浏览器中都能正确显示。
p{ font-family:"微软雅黑";}
复制代码
CSS Unicode字体
在 CSS 中设置字体名称,直接写中文是可以的。但是在文件编码(GB2312、UTF-8 等)不匹配时会产生乱码的错误。xp 系统不支持 类似微软雅黑的中文。
方案一: 你可以使用英文来替代。 比如 font-family:"Microsoft Yahei"。
方案二: 在 CSS 直接使用 Unicode 编码来写字体名称可以避免这些错误。使用 Unicode 写中文字体名称,浏览器是可以正确的解析的。
注:可以通过escape() 来测试属于什么字体
复制代码字体名称
英文名称
Unicode 编码
宋体
SimSun
\5B8B\4F53
新宋体
NSimSun
\65B0\5B8B\4F53
黑体
SimHei
\9ED1\4F53
微软雅黑
Microsoft YaHei
\5FAE\8F6F\96C5\9ED1
楷体_GB2312
KaiTi_GB2312
\6977\4F53_GB2312
隶书
LiSu
\96B6\4E66
幼园
YouYuan
\5E7C\5706
华文细黑
STXihei
\534E\6587\7EC6\9ED1
细明体
MingLiU
\7EC6\660E\4F53
新细明体
PMingLiU
\65B0\7EC6\660E\4F53
font-weight:字体粗细
font-weight属性用于定义字体的粗细,其可用属性值:normal、bold、bolder、lighter、100~900(100的整数倍)。
注:数字 400 等价于 normal,而 700 等价于 bold。 但是我们更喜欢用数字来表示。
复制代码
font:综合设置字体样式
使用font属性时,必须按语法格式中的顺序书写,不能更换顺序,各个属性以空格隔开。
注意:其中不需要设置的属性可以省略(取默认值),但必须保留font-size和font-family属性,否则font属性将不起作用。
选择器{font: font-style font-weight font-size/line-height font-family;}
复制代码
CSS标签
CSS命名不要纯数字、中文等命名, 尽量使用英文字母来表示。
标签选择器
标签名{属性1:属性值1; 属性2:属性值2; 属性3:属性值3; }
元素名{属性1:属性值1; 属性2:属性值2; 属性3:属性值3; }
复制代码
类选择器
.类名{属性1:属性值1; 属性2:属性值2; 属性3:属性值3; }
标签调用的时候用 class=“类名” 即可。
复制代码
多类名选择器
样式显示效果跟HTML元素中的类名先后顺序没有关系,受CSS样式书写的上下顺序有关。
各个类名中间用空格隔开。
复制代码
id选择器
id名即为HTML元素的id属性值,大多数HTML元素都可以定义id属性,元素的id值是唯一的,只能对应于文档中某一个具体的元素
注:选择器和类选择器区别在于 次数 id只能使用一次
#id名{属性1:属性值1; 属性2:属性值2; 属性3:属性值3; }
复制代码
通配符选择器
* { 属性1:属性值1; 属性2:属性值2; 属性3:属性值3; }
复制代码
伪类选择器
注意写的时候,他们的顺序尽量不要颠倒 按照 顺序 link->visited->hover->active
a { /* a是标签选择器 所有的链接 */
font-weight: 700;
font-size: 16px;
color: gray;
}
a:hover { /* :hover 是链接伪类选择器 鼠标经过 */
color: red; /* 鼠标经过的时候,由原来的 灰色 变成了红色 */
}
复制代码
结构(位置)伪类选择器(CSS3)
:first-child :选取属于其父元素的首个子元素的指定选择器
:last-child :选取属于其父元素的最后一个子元素的指定选择器
:nth-child(n) : 匹配属于其父元素的第 N 个子元素,不论元素的类型
:nth-last-child(n) :选择器匹配属于其元素的第 N 个子元素的每个元素,不论元素的类型,从最后一个子元素开始计数。
n 可以是数字、关键词或公式
li:first-child { /* 选择第一个孩子 */
color: pink;
}
li:last-child { /* 最后一个孩子 */
color: purple;
}
li:nth-child(4) { /* 选择第4个孩子 n 代表 第几个的意思 */
color: skyblue;
}
复制代码
目标伪类选择器(CSS3)
:target {
color: red;
font-size: 30px;
}
复制代码
引入CSS样式表
type="text/CSS" 在html5中可以省略, 写上也比较符合规范。
内部样式表
内嵌式是将CSS代码集中写在HTML文档的head头部标签中,并且用style标签定义,其基本语法格式如下:
复制代码
行内式(内联样式)
内联样式,又有人称行内样式、行间样式、内嵌样式。是通过标签的style属性来设置元素的样式,其基本语法格式如下:
内容 标签名>
复制代码
外部样式表(外链式)
链入式是将所有的样式放在一个或多个以.CSS为扩展名的外部样式表文件中,通过link标签将外部样式表文件链接到HTML文档中,其基本语法格式如下:
复制代码href:定义所链接外部样式表文件的URL,可以是相对路径,也可以是绝对路径。
type:定义所链接文档的类型,在这里需要指定为“text/CSS”,表示链接的外部文件为CSS样式表。
rel:定义当前文档与被链接文档之间的关系,在这里需要指定为“stylesheet”,表示被链接的文档是一个样式表文件。
复制代码
标签显示模式
块级元素(block-level)
常见的块元素有
~
、
、
- 、
- 、
- 等,其中
标签是最典型的块元素。
复制代码块级元素的特点:
总是从新行开始
高度,行高、外边距以及内边距都可以控制。
宽度默认是容器的100%
可以容纳内联元素和其他块元素。
行内元素(inline-level)
常见的行内元素有、、、、、
、、、、等,其中标签最典型的行内元素。复制代码行内元素的特点:
和相邻行内元素在一行上。
高、宽无效,但水平方向的padding和margin可以设置,垂直方向的无效。
默认宽度就是它本身内容的宽度。
行内元素只能容纳文本或则其他行内元素。(a特殊)
注:
只有 文字才 能组成段落 因此 p 里面不能放块级元素,同理还有这些标签h1,h2,h3,h4,h5,h6,dt,他们都是文字类块级标签,里面不能放其他块级元素。
链接里面不能再放链接。
复制代码
块级元素和行内元素区别
块级元素的特点:
总是从新行开始
高度,行高、外边距以及内边距都可以控制。
宽度默认是容器的100%
可以容纳内联元素和其他块元素。
复制代码行内元素的特点:
和相邻行内元素在一行上。
高、宽无效,但水平方向的padding和margin可以设置,垂直方向的无效。
默认宽度就是它本身内容的宽度。
行内元素只能容纳文本或则其他行内元素。
复制代码
标签显示模式转换 display
块转行内:display:inline;
行内转块:display:block;
块、行内元素转换为行内块: display: inline-block;
复制代码
外链式样式表_WEB前端 CSS样式表相关推荐
- html5外链式引入不了字体,css中导入外部字体不生效的原因是什么?
css中可以使用@font-face引入外部字体,使用@font-face规则,网页设计师再也不必使用的"web-safe"的字体之一.有时使用@font-face规则引入外部字体 ...
- 外链式样式表_引入CSS样式表(书写位置)
CSS初识 CSS(Cascading Style Sheets) 美化样式 CSS通常称为CSS样式表或层叠样式表(级联样式表),主要用于设置HTML页面中的文本内容(字体.大小.对齐方式等).图片 ...
- 外链式样式表_html+css外链式
无标题文档 h1{background:red;} /*这是Css注释*/ p{color:greenyellow;} div{font-size: 30px;} .one{color: yellow ...
- 外链式样式表_CSS外链式与内联式的区别是什么
区别:CSS外链式是将css代码单独写一个以".css"为扩展名的文件中,然后使用link标签链接到html中.CSS内联式是直接使用style属性将css代码写在HTML标签中. ...
- HTML接外链式的CSS 样式
在HTML的头部标签<head></head>中导入外链式标记<link> <head> <link rel="stylesheet&q ...
- html外链式css运行不出来div,html+css外链式
无标题文档 h1{background:red;} /*这是Css注释*/ p{color:greenyellow;} div{font-size: 30px;} .one{color: yellow ...
- html外链怎么做,html+css外链式
无标题文档 h1{background:red;} /*这是Css注释*/ p{color:greenyellow;} div{font-size: 30px;} .one{color: yellow ...
- 【前端】3.总结一下前端css样式规范
总结一下前端css样式规范 前端样式CSS 规范 分类的命名方法 统一语义理解和命名 模块(.m-).元件(.u-) 功能(.f-) 皮肤(.s-) 状态(.z-) sass 规范 当前选择器的样式属 ...
- 表格应用css样式,对表格与表单应用CSS样式.ppt
<对表格与表单应用CSS样式.ppt>由会员分享,可在线阅读,更多相关<对表格与表单应用CSS样式.ppt(12页珍藏版)>请在人人文库网上搜索. 1.第十章,HTML与CSS ...
最新文章
- 跨平台表空间传输(摘自eygle《循序渐进Oracle》)
- 油价新年首涨:“五连跌”终结 一箱油多花4元
- D3D API - D3DTA_TEMP
- 在高科技产业当中,有时候你的产品出现了问题,你反过来可以把这个问题称为你的特点...
- java mysql failover_mysqlfailover测试
- ZerMQ安装与使用
- 【转载】 vs2005视频教程 之 抽象类和接口 四 [视频]
- 算法图解 PDF 原文内容分享
- ArcGIS与地理加权回归GWR【一】
- 医院his系统机房服务器,医院信息中心机房如何建设
- lm opencv 算法_LM算法
- 一种去除U盘写保护的可行方法(dd 命令解决)
- Mac上如何完美的转换epub至mobi供kindle观看
- Photoshop 更改图片颜色
- 油田智能化远程监控系统_油气田长停井图像远程传输监控系统
- 长治南垂驾校科目二经验总结
- 摩登兄弟:参加《歌手》压力很大,在准备下一期歌曲
- 密码主页jQuery插件的应用(注册时的验证)
- “多源异构”和“异构同源”定义区分详解
- APP机型兼容测试的手机选择