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 .类名 {
}
.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; }
id选择器:与class选择器类似,区别,id是唯一的,名字类似类选择器,id类似身份证 使用次数上类选择器可以使用多次,id选择器 唯一性只能使用一次。
类选择器。写样式最多。 id选择器,js搭配最多。
通配符选择器:来表示,表示所有的标签, / 所有的标签 降低页面响应速度,不建议随便使用*/
基础选择器: 1.标签选择器 不能选一个段落,不能差异化选择。
2.类选择器,可以选择一个或者多个。点.相当于身份证上的名字。…
3.id选择器,一次只能选择一个标签。相当于身份证号码。###
4.通配符 * id和通配符不随便使用。***
- 尽量少使用通用选择器 *,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