CSS_嵌入式书写方式_文字控制三属性_实体化三属性_显示模式_css的三种书写模式_选择器_编写一个百度的主页_Unit_3;

Topic 1 ：CSS的第一个书写方式 ：

CSS不属于标签；

css的一个小案例：

代码示例：

    
七步诗
    

        煮豆燃豆萁，豆在釜中泣。

        本是同根生，相煎何太急。
    

Topic 2 ：文字控制三属性：

颜色 -- color

字号 --font-size

字体 --font-family

 

文字加粗 --font-weight：bold（100,200,300....） -- bold就等于700

内容对齐属性 --text-align：left|center|right

Topic 3 ：实体化三属性：

实体化三属性虽然简单，但是真的很重要，兼容性好不好，css学的好不好，全都体现在实体化三属性是否运用得当

宽度 -- width

高度 -- height

背景色 --background

总结：在css2.0阶段，所有标签都是矩形，如果出现了非矩形的标签需要切图制作

Topic 4 ：显示模式：

div：大容器、大盒子。通常用作网页的布局和排版，结构的搭建；内部可以存放任何标签、任何内容。

span：小容器、小盒子、通常存放特殊效果的文字或小图标、小图片等等。

就是盒子在页面中的显示方式

所有html标签按显示模式划分为两类：块级标签和行内标签

块级标签：最具代表性的标签就是div。特点：独占一行，可以设置宽高并能生效

行内标签：最具代表性的标签就是span。特点：一行可以共存多个，可以设置宽高但是不生效，自身尺寸受内容的控制。

行内块（由css制造出来的显示模式） -- inline-block；特点：既有块级标签的优点（成功设置宽高）又有行内标签的优点（一行可以共存多个）

    /*
        div是块状标签   span是行内标签  二者可以相互转化  
        还有一种显示模式就是 行内块  inline-block
        display:none;不占位置隐藏
        visibility:hidden; 占位置隐藏；
    */

编写这样的网页：

代码如下：

	
我是div
	我是span
	我是span

Topic 5 ：css的书写模式：

行内式：

写法：在标签身上添加style这个html属性，style=“css键值对”

1

注意：行内式没有实现结构与样式分离，不推荐前台工作人员使用，一般都是后台开发人员css比较薄弱，比较习惯这种行内式

内嵌式：

我们刚开始介绍的就是这种写法；

将css嵌入到html页面

结构与样式实现半分离

外链式：

前台工作人员最常用的书写方式。外部链接式才是实现了真正的结构与样式分离

代码示例 ：

	
测试一下外链式

@charset "utf-8";
/* CSS Document */

div{background: red; }

Topic 5 ：选择器：

选择器在定义的时候要注意：

规则为：不能出现中文；不能使用特殊符号；不能以数字开头，可以以数字结尾

标签选择器： 就是对应的标签

id选择器：  #

类选择器： .

通配符选择器 *（选中所有的标签包括废标签）  它的针对性最低  所以权重最低  （开发中就不用他了  浏览器要执行时间长）

注意：

Id选择器权重大于类选择器大于标签选择器

谁针对性高谁优先生效    所以行内属性权重最高

！important 提权 -- 可以将权重提高到最高

！important书写在键值对分号之前

代码示例如下：

	
选择器权重比较

Topic 5 ：我们写一个简单的百度：

网页示例如下：

代码示例如下：

注意：
        我们都是用div来布局
        我们h1都是默认写公司的logo
        我们都把导航的class命名为nav
        我们用btn来表示按钮的class

	

		

	
	
	

		新 闻  网 页  贴 吧  知 道  音 乐  图  片  视 频  地 图
	
	

	



		
		
	

注意：

HTML中不认识回车只认识标签；

空格只认识一个；

所以回车是
;

空格是 : " "