css 01

2019-02-19  本文已影响3人  cj小牛

css 初识

css样式规则

css字体样式属性
font-family：字体

font-faimily 属性用于设置字体。网页中常用的字体有宋体、微软雅黑、黑体等。
使用技巧

  1. 现在网页中普遍使用14px+
    2 尽量使用偶数的数字符号。ie6等老式浏览器支持奇数会有bug
    3 各种字体之间必须使用英文状态下的逗号隔开
    4 中文字体需要加英文状态下的引号，英文字体一般不需要加引号。当需要设置英文时，英文字体名必须位于中文字体之前
    5 如果字体中包括空格、#、$ 等符号，则字体必须加英文状态下的单引号或双引号，例如：font-faimily：“times new Roman”
    例如：font-family：“宋体” font-family：“微软雅黑”
css Unicode字体
font-weight：字体粗细

字体加粗除了b strong 标签之外，可以使用css 来实现，但是css没有语意。
font-weidth 属性用于定义字体的粗细，其可用的属性：normal。bolod、bolder、lighter、100-900（100的整数倍） 推荐使用数字

font-style

字体倾斜除了用i 和em之外，可用使用css 来实现，但是css 没有语意
fong-style 属性用于定义字体风格，例如设置斜体、倾斜或正常字体
normal 指定正常的样式
italic： 让字体斜体
oblique：浏览器会显示倾斜的字体样式。
技巧：
批示我们很少给字体加斜体，反而谢欢给系统提标签（em i）该成普通样式

字体综合设定

font 属性用对字体样式进行综合设置，器语法点如下
选择器{font :font-style font-weight font-size/line-height font -faimily;}
使用font属性时，必须按上面语法格式中的顺序书写，不能更换顺序，各个属性以空格隔开
注意： 其中不需要设置的属性可以省略，但必须保留font-size和font-family 属性，否则font 属性将不器作用

选择器（重点）

要将csss演示应用于特定的HTML 元素，首先需要找到该目标元素。在css中，执行这一任务的演示规则部分被称为选择器

标签选择器（元素选择器）

标签选择器是指用HTML标签称作为选择器，按标签名称分类，微页面中某一类标签制定统一的css样式。

  p {
        color: red;
    }
类选择器

类选择器用 . 来进行表示，后面紧跟类名
. 类名{ 属性1：属性值1；属性2：属性值2；}
标签调用时用 class = ”类名“即可

 .minren { //申明类样式
        color: red;
    }
<div class="minren">名人</div>//引用类演示 class 单词类型的意思

类选择器最大的优点是可以为元素队形定义单独或者相同的样式
类样式命名技巧:
1 长名称或词组可以使用就横线来为选择器命名
2 不建议使用-下划线来命名css 选择器
3 不要单纯数字、中文等命名，尽量使用英文字母来表示。

id选择器

格式 #名字 {样式一：值一；样式二：值二}

     # minren { //申明类样式
        color: red;
    }
<div id="minren">名人</div>

类选择器和id选择器的区别
W3C 标准规定，在同一个页面内，不允许有相同名字的id对象出现，但是允许相同的名字class
类选择器（class）好比人的名字，是可以多次重复使用的
id 选择器 好比人的身份证，不能重复使用。只能使用一次

通配符选择器
伪类选择器

首先，这也是一个选择器，伪类选择器用于向一些选择器添加特殊的效果。比如给链接添加特殊的此傲骨，比如可以选择第一个，第n个元素。
为了和我们逛才学过的类徐昂周期曲表，可选择器是一个点。比如 .demo{} 而伪类选择器就是 ：link{}
链接伪类选择器：

结构（位置）伪类选择器（css3）

</ol>

目标伪类选择器

：target 目标伪类选择器：选择器可以用于选取当前活动的目标元素

：target { // 当前被选择的用于锚点等
 color :red;
}

外观属性

颜色半透明（css3）

文字颜色到了css3我们可以采用半透明额格式了员入下

 color：rgba（r,g,b,a） a是alpha 透明的意思 color （0，2，2，0.3）
文字的阴影

以后我们可以给我们的文字添加阴影效果了Shadow
text-shadow ；水平位置 垂直位置 模糊距离 影音颜色


32439C73-38E0-4271-8324-2BD3AF68B345.png 
text-shadow ：1px 2px 3px rgba（0，0，0，0.6）
前连个参数必须写，后面两个参数可以省略.

5 引入css样式表

css 可以写到那个位置？是不是一定要写到html中？

5.1行内样式

是通过标签的style属性来设置元素的样式，其基本语法格式如下：

<标签 style = "属性1：属性值1；属性2 ：属性值2；">内容</标签>

语法中style是标签的属性值，实际上任何HTML标签都拥有style 属性，用来设置行内样式。其中属性和值得书写规范与css样式规则相同，行内样式所在的标签及嵌套在其中的子标签起作用。

5.2 内部样式

内嵌式是将CSS代码集中写在HTML文档的head头部文件中，并且用style标签定义，其语法格式如下：

<head>
<style>
选择器{属性1：属性值1；属性2：属性值2；}
</style>

语法中，style标签一般位于head白浅中title标签之后，也可以吧他放在html的任何地方
</head>

5.3外部样式

链入式是将样式放在一个或多个以.css 为扩展名的外部样式表文件中，通过link标签将外部样式表文件链接到html 文档中，其基本语法格式如下

<head>
 <link href = "css文件路径" rel = "stylesheet"/>
</head>

注意：link 是个单表亲啊哦
该语法中，link 标签需要放在head头部标签中，并且必须制定link标签的三个属性。
-href 定义所链接尾部样式表文件的url ，可以是嫌贵路路径也可以是绝对路径

5.4 三种演示表总结

DECBD101-8BE0-4D3F-8EBE-F8A0E12068A1.png

6标签显示模式（display）

html 标签一般分为块标签和行内标签两种类型，他们也称为块元素和行内元素

6.1 块级元素（block-level）

每个块元素通常会独自占据一整行或多行，可以对其设置宽度、高度、对其等属性，常用语网页布局和网页结构的搭建。
常见的块元素有<h1-h6> ,<p>,<div>,<ul>,<ol><li>等，其中<div>是最典型的块元素
块级元素的特点：
1 总是从新开始
2 高度，行高、外边距以及内编辑都可以控制。
3 宽度默认是容器100%
4 可以容纳内联元素和其他块元素。

6.2行内元素（inline-level）

行内元素（内联元素）不占有独立的区域，仅仅靠自身的字体大小和图像尺寸来支撑结构，一般不可以设置宽度、高度、对齐等

常见简的行内元素 有<a> <strong> <b><em><I><del><s><ins><u><span> 其中span 是典型的行内元素

行内元素的特点
1 和相邻行内元素在一行上
2 高、宽无效，但水平的padding和margin可以设置，垂直方向的无效。
3 默认宽度就是他本身内容的宽度。
4 行内元素只能容纳文本或者其他行内元素 a特殊
注意：
1.只有文字才能组成段落 因此p里面不能放块级元素，同理还有这些标签h1-h6 dt，他们都是文字类块级标签，里面不能放其他块级元素
2 . 链接里面不能再放链接

6.3块级元素和行内元素区别

83852E2C-445C-4746-81E0-75A853F479B0.png

6.4 行内块元素（inline -block）

行内元素总有几个特殊的标签 imge input td ，可以对他们设置宽度和对齐属性，有些资料可能会称为他们为行内块元素。
行内块元素的特点：
1 和相邻内元素（行内块）在一行上，但是之间会有空杯缝隙
2 默认宽度就是他本身内容的宽度。
3 高度，行高、外边距以及内边距都可以控制。

标签显示模式转换display

块转行内：display:inline;
行内转块：display：block；
块、行内元素转换为行内块：display：inline-block

上一篇下一篇

猜你喜欢

热点阅读