CSS+ day1

137 阅读4分钟

CSS+ day1

行内式,内联式,外部样式,CSS的基础选择器(类选择器,id选择器,通配符选择器) font Font-weight 字体粗细 font-style font-family
Color text-align text-indent Text-decoration emment 语法

css三种引入方式, css网页的美容师,

Css基本的选择器

css文字文本样式, css调试工具

快捷语法,

js是魔法师,css是美容师,

Css 设置版面布局和css样式的。

1.行内式、、、控制范围是一个标签。

test1

test1

、style属性

2.内部样式表比行内式 好,结构与样式分离。理论上放到html哪里都可以,但是写在head里面比较好。控制范围是一个页面。 Head标签内 style标签

选择器 { color:red;

} h2 { color:blue; font-size: 30px; }

<h3 style="color: red; font-size:30px">test1</h3>
<h2 style="color: red; font-size:30px">test1</h2>

<!-- 行内样式,标签属性 -->

3.外部样式表 样式共享,结构与样式彻底分离。最好用,控制范围是一个站点。 引入文件,html文件,css文件建立联系。 结构与样式相分离, 样式共享,可以多个html文件调用同一个css.

4.代码风格。 展开格式, h3{ color: red; font-size: 10px; }

所有的属性值关键字全部是小写字母,属性字符串允许使用大小写。

4.样式规则

/*选择器 空格 / h3 { / 分号结束,一行用空格, */ color: red; font-size: 10px; }

5.CSS 选择器(CSS的基础选择器+复合选择器)

主要作用:页面中元素选出 选择标签用的,想要的标签选择出来。

CSS的基础选择器 标签选择器:所有的标签,全部选出来。

<h3>来呀,,,,</h3>
<h3>来呀,,,,</h3>
<h3>来呀,,,,</h3>
<span>来呀,,,,</span>
<h3>来呀,,,,</h3>
<h3>来呀,,,,</h3>

h3 { /* 分号结束,一行用空格, */ color: red; font-size: 10px; }

span { color:green; }

类选择器:类使用的是最多的。点。类名是自定义。多类名,调用多个类 在一个标签内部只有一个class. class .类名 {

}

G o o g l e

.blue { font-size: 100px; color: blue; }

.red { font-size: 100px; color: red; }

.yellow { font-size:100px; color: yellow; }

.green { font-size:100px; color:green; }

.font100 { font-size: 100px; }

.blue { color: blue; }

.red { color: red; }

.yellow { color: yellow; }

.green { color:green; }

G o o g l e

id选择器:与class选择器类似,区别,id是唯一的,名字类似类选择器,id类似身份证 使用次数上类选择器可以使用多次,id选择器 唯一性只能使用一次。

类选择器。写样式最多。 id选择器,js搭配最多。

通配符选择器:来表示,表示所有的标签, / 所有的标签 降低页面响应速度,不建议随便使用*/

基础选择器: 1.标签选择器 不能选一个段落,不能差异化选择。

2.类选择器,可以选择一个或者多个。点.相当于身份证上的名字。…

3.id选择器,一次只能选择一个标签。相当于身份证号码。###

4.通配符 * id和通配符不随便使用。***

  1. 尽量少使用通用选择器 *,2.尽量少使用id选择器 3.Div span 尽量不要来定义标签选择器。

CSS文本样式,

1.字体样式,完成对字体的设置。字号 字体。 2.css外观属性给页面元素添加样式。 3.使用常用的emment 语法 4.能够使用开发人员工具代码调试。

字体样式, font-size 字大小 font-family 字体 Font-weight 字体粗细 Font-style 字体风格。 font 综合设置字体样式 font

Id > class

相对长度单位 em px 绝对长度单位 mm pt 默认是16px 一般都需要给body指定整个页面的大小。

body { font-size: 100px; }

font-family

顺序,如果有就不会向后执行了。则以电脑的默认字体。中文需要加引号,英文一般是不需要加引号的 如果多个单词特殊符号也需要加引号。 多个字体需要用逗号分开。

body {分号隔开 font-size: 100px; font-family:Arial, "Microsoft Yahei", "微软雅黑","黑体";font-family逗号隔开。 }

Unicode 来写中文,因为xp系统不支持类似微软雅黑的中文。 1.方案一 使用英文。 2.方案二 使用unicode的中文。

Font-weight 字体粗细 1.加粗 可以使用加粗的标签。 b strong 2. css normal 正常的 bold bolder light number. 100 200 bold 700==bold 没有单位的。多用数字来书写。 400 ==noraml

font-style 字体风格 倾斜

font-style: italic;  倾斜
font-style: normal; 正常

font的综合写法 空格隔开。严格按照这个顺序来写。可以不写,但是必须有font-size. font-family

Font-style Fong-weight font-size font-family

font:italic 700  20px "微软雅黑";

font: 20px "微软雅黑";

css外观属性 颜色,

color 1.颜色 color:red; 2.十六进制 #ff0000 十六进制是使用的最多的。 或者简写 #f00 3.RGB代码 rgb(255,0,0)

text-align 文本水平对齐方式

Line-height 比字号大7-8像素就可以了。

line-height: 30px;行间距

首行缩进 em是宽度的倍数。 1em 是字符宽度的倍数,

text-indent: 2em;首行缩进

Text-decoration :去掉下划线。 none, underline, blink,overline,line-through.

emment 语法

1.! 2.div +tab 标签➕+tab 3.div*4 4.父子级 ul>li 5.兄弟+ div+p

6. dl>dt+dd 7.类名的.demo .demo #tab
8.demo$*3