小陈第二天 css基础

1、css的发展史:

    css 是用来表现我们html  文件的一种语言

        1996年  发布第一个版本

        2004年  发布的2.01版本

        2010年  最新版本3.0版本

2、基本语法+选择器:

(1)基本语法

图1 基本语法

(2)选择器

选择器{

        声明1;(声明里面包含了属性名和属性值)

        声明2;

              }

直接用标签改变样式,这个标签就称作标签选择器

(3)类选择器 

 类选择器  可以给多个标签设置一样的类名

  <p class="c">  我是p标签</p>

  <h2 class="c">我是h2</h2>

id选择器  一个id名只能对一个标签(唯一性)

  <h3 id="d">我是h3</h3>

选择器的优先级:

id  最大---class---标签最小

3、引入方式

(1)行内样式

图2  行内样式

在body段落中直接引入

(2)内部样式

图3   内部样式

(3)外部样式 (两种方法引入)

1、外部引用第一种 链接引入

<link rel="stylesheet" href"外部.css格式文本">

图4 使用link外部引用

2、外部引入第二种 导入本地css

      @import url(导入本地.css文本) 

图5 使用@import引入

优先级:

      css样式遵循就近原则  行内样式>内部样式>外部样式

4、span标签

span标签没有实际意义

不能直接设置宽高,不独占一行

图6 span标签的使用

图6-1 span标签使用的效果图

5、字体样式

font-size: __px; 设置P标签里面的字体大小

      font-family: "宋体"    设置P标签里面的字体类型

      font-style: italic;    设置P标签里面的字体样式为倾斜

      设置P 标签里面的字体粗细

      font-weight: bold;加粗

      font-weight: bolder;在bold基础上更粗

      font-weight: lighter; 变得更细

      font-weight: 100; 取值范围100-900,常用400  600  900(同样设置字体粗细)

  亦可以简写为: font:italic 900 50px "楷体";

      顺序: font : font-style(倾斜)  font-weight(粗细)  font-size(字体大小)  font-family(字体类型)

6、文本样式:

    color: #000; 黑色

    color:#fff; 白色

    color: #f00; 红色

    color: #0f0; 绿色

    color: #00f; 蓝色

    color: rgb(255, 0, 0);

    color: rgba(255, 0, 0, .9);

    rgba(    );设置透明色,透明度的0.9可以写成.9

    text-align: left;    文本居左

    text-align:right    文本居右

    text-align: center;  将文本居中

    text-indent: __px;  设置首行缩进

    line-height: 100px;  设置行高

    设置行高等于高度,并且再设置text-align:center 就可以让文本水平居中

    text-decoration:none;            设置文本的装饰(none为默认值,代表无)

    text-decoration: underline;      给文本添加下划线

    text-decoration: overline;      给文本上方加上一条线

    text-decoration:line-through    给文本加上一条线,穿过这个文本

7、a标签的伪类

    a:link 未访问时候的样式

    a:visited  访问过后的样式

    a:hover    鼠标悬浮上方的样式

    a:sctive    鼠标未点击未松开时的样式

    顺序不可错,记忆方式love hate

图7  a标签伪类的使用

 

猜你喜欢

转载自blog.csdn.net/weixin_50419323/article/details/108363046