Web学习-CSS（一）

CSS（一）

引入CSS样式表

1.行内样式表（内联样式）

<h2 style="color: blue; font-size: 22px;">行内样式表</h2>

<标签 style="属性名: 属性值; 属性名: 属性值;...."></标签>
  • 属性和属性值之间用:隔开
  • 多组属性之间用;隔开

2.内部样式表

写在<head> </head>之间

选择器 {
        属性名: 属性值;
        属性名: 属性值;
      }
      
    <style type="text/css">
        h2 {
            color: green;
            font-size: 22px;
        }
        h4 {
            color: blue;
        }
        p {
            color: red;
        }
    </style>
  • 选择器可以理解为，你想要选择的标签比如 h2、p等等
  • type="text/css"可省略

3.外部样式表（外链式）

将所有的样式放在一个或多个以.css为扩展名的外部样式表文件中
通过link标签将外部样式表文件链接到HTML文件中

操作步骤：

1. 新建一个文件，保存为style.css，在文件中添加代码

    h3 {
        color: cyan;
        font-size: 66px;
    }

2. 新建一个html文件，保存为index.html，在body中写入下面代码

    <h3> 狂浪是一种态度 狂浪在起起伏伏 狂浪 狂浪 狂浪 狂浪 </h3>

3. 在html文件的head标签中添加下面的代码

    <link rel="stylesheet" href="style.css">

好啦！运行一下试试吧！
注意：按照上面的写法，css文件和html文件要在同一个文件夹中！！！

CSS选择器

1.CSS选择器作用

找到特定的HTML页面元素，就是选择标签用的，把想要的元素选择出来。

  • CSS做了两件事：选对人，做对事
  • CSS选择器分为基础选择器和复合选择器

2. CSS基础选择器

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

标签选择器：可以把某一类的标签全部选择出来，例如：所有的div、span

前面的CSS使用的就是标签选择器

2.2 类选择器

标签选择器使用.进行标识，后面紧跟类名

语法：

    .类名 {
        属性名: 属性值;
        属性名: 属性值;
        ...
    }

在标签中的使用

    <p class='类名'></p>
  • 实例展示
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>外部样式表的使用</title>
    <!-- <link rel="stylesheet" href="style.css"> -->
    <style>
        .red {
            color: red
        }
    </style>
</head>
<body>
    
    <!-- <h3> 狂浪是一种态度 狂浪在起起伏伏 狂浪 狂浪 狂浪 狂浪 </h3> -->
    
    <div>一波一波接踵而来</div>
    <div>大风带着我摇摆</div>
    <div>梦在燃烧</div>
    <div>心在澎拜</div>
    <div>不用徘徊</div>
    <div>大摇大摆漂在人海</div>
    <div class="red">随着心情放肆嗨</div>
    <div>别服输</div>
    <div>跟着脚步</div>
    <div>要爱你就来</div>

</body>
</html>

效果：

类选择器.png

命名规范：不要纯数字、中文，尽量使用英文字母来表示，要做到见名知意
长名称或者词组，中间使用中横线连接

2.3 多类名选择器

在实际开发中，每个标签的样式大都不是来自于一个类，会用多个类来组合到一起展示样式，这个需要怎么做呢？

    <!-- style的样式定义 -->
    <style>

        .font120 {
            font-size: 120px;
        }

        .blue {
            color: blue;
        }
     </style>
     
     <!-- 在标签中使用 -->
     <span class="blue font120">G</span>
     
     <!-- 一个标签内部只能有一个class，下面的写法是错误的 -->
     <!-- <span class="blue" class="font120">G</span> -->
  • 注意：多类名在使用时，不可以写一个以上的class属性
  • 多个类名写在一个class属性中，各类名中间用空格隔开

Google案例下载

2.4 id选择器

id选择器的用法和类选择器很是相像

/*定义一个id选择器*/
#(id名) {
    属性名: 属性值;
    ...
}
<!-- 实例 -->
#red {
    color: red;
}

<!-- 在标签中的使用 -->
<p id="red">心很空</p>

id选择器和类选择器的区别

  • 类选择器可以重复多次使用，id选择器不得重复，只能使用一次
  • id选择器没有 多id选择器 的功能
  • id选择器一般用于页面唯一性的元素身上，经常和javascript搭配使用

2.5 通配符选择器

通配符选择器使用*表示，代表选择页面中所有标签

  * {
        属性名: 属性值;
        ...
    }
    
    <!-- 清除所有标签的内外边距 -->
    <!-- 以后会用的到，现在先熟悉一下 -->
  * {
        margin: 0;
        padding: 0;
    }
  • 通配符选择器会匹配页面所有元素，降低页面响应速度，不要随便使用

案例链接

CSS字体样式属性及调试工具

  • 学习目标
    • 使用css字体样式完成对字体的设置
    • 使用css外观属性给页面元素添加样式
    • 使用常用的emment语法
    • 能够使用开发人员工具代码调试

1.font字体

1.1 font-size:字体大小

font-size属性用来设置字号

p {
        font-size: 20px;
  }
  • px：单位，像素。
  • 可以使用相对长度单位，也可以使用绝对长度单位。
  • 绝对长度单位使用情况较少，推荐使用px

单位相关，见下图：
字体单位

  • 在开发过程中使用的单位，基本就是px，其他单位很少用
  • 谷歌浏览器默认文字大小是16px
  • 各浏览器默认的字体大小不一致，所以尽量指定大小

1.2 font-family:字体

p {
        font-family: "微软雅黑";
  }

p {
        font-family: Arial, "Microsoft YaHei", "微软雅黑", "黑体";
  }

同时指定多个字体，要用,分割
在指定多个字体时，系统从第一个字体开始匹配，如匹配不到，则匹配第二个字体，匹配到，则使用该字体。
如果都没有，则使用电脑默认字体。

CSS Unicode字体

  • 在CSS中设置字体名称，可以使用中文，但是在一些文件编码不匹配时，会产生乱码
  • 解决办法：
    • 可以使用英文
    • 可以使用unicode编码来指定字体名称
字体名称 英文名称 Unicode 编码
宋体 SimSun \5B8B\4F53
新宋体 NSimSun \65B0\5B8B\4F53
黑体 SimHei \9ED1\4F53
微软雅黑 Microsoft YaHei \5FAE\8F6F\96C5\9ED1
楷体_GB2312 KaiTi_GB2312 \6977\4F53_GB2312
隶书 LiSu \96B6\4E66
幼园 YouYuan \5E7C\5706
华文细黑 STXihei \534E\6587\7EC6\9ED1
细明体 MingLiU \7EC6\660E\4F53
新细明体 PMingLiU \65B0\7EC6\660E\4F53

上面是常见字体的英文名称和unicode编码

1.3 font-weight:字体粗细

  • 在html中可以使用b或者strong标签使文本加粗
  • 可以使用CSS来实现加粗，但是CSS是没有语义的
属性值 描述
normal 默认值（不加粗的）
bold 定义粗体（加粗的）
100~900 400 等同于 normal，而 700 等同于 bold 我们重点记住这句话 
p {
        font-weight: 700;
  }
h2 {
        font-weight: normal;
  }

1.4 font-style:字体风格（倾斜）

  • 在html中可以使用i或者em标签使文本加粗
  • 可以使用CSS来实现，但是CSS是没有语义的
属性 作用
normal 默认值，浏览器会显示标准的字体样式 font-style: normal;
italic 浏览器会显示斜体的字体样式。 
.style {
        font-style: italic;
     }
  • Tips：平时很少给字体添加倾斜，反而将倾斜字体改为正常模式比较多

1.5 综合性写法

        /*
         font: font-style  font-weight  font-size/line-height  font-family;
         */
        .title {
            /*综合性写法*/
            font: italic 700 20px "黑体";
        }

line-height：行间距，后续会说到

  • 注意：
    • 使用font属性时，必须按上面语法格式中的顺序书写，不能更换顺序，各个属性以空格隔开。
    • 其中不需要设置的属性可以省略（取默认值），但必须保留font-size和font-family属性，否则font属性将不起作用。

CSS外观属性

1.1 color 文本颜色

color属性用于定义文本颜色

取值方式

  • 其取值方式有如下3种：
表示表示 属性值
预定义的颜色值 red，green，blue
十六进制 #FF0000，#FF6600，#29D794
RGB代码 rgb(255,0,0)或rgb(100%,0%,0%)

1.2 text-align 文本水平对齐方式

作用：设置文本内容的水平对齐方式

属性 解释
left 左对齐（默认值）
right 右对齐
center 居中对齐 
.align_center {
            text-align: center;
        }

1.3 line-height 行间距

行间距：行与行之间的距离，一般比字号大7-8像素就可以了

  • 单位：
    • line-height常用的属性值单位有三种，分别为像素px，相对值em和百分比%，实际工作中使用最多的是像素px
    p {
            line-height: 24px;
      }

1.4 text-indent 首行缩进

用于设置文本的首行缩进

  • 属性值

    • 其属性值可为不同单位的数值、em字符宽度的倍数、或相对于浏览器窗口宽度的百分比%，允许使用负值,
    • 建议使用em作为设置单位。

1em 就是一个字的宽度 如果是汉字的段落， 1em 就是一个汉字的宽度

    p {
            text-indent: 2em;
       }

1.5 text-decoration 文本装饰

text-decoration 通常我们用于给链接修改装饰效果

值 描述
none 默认。定义标准的文本。 取消下划线（最常用）
underline 定义文本下的一条线。下划线 也是我们链接自带的（常用）
overline 定义文本上的一条线。（不用）
line-through 定义穿过文本下的一条线。（不常用）
blink 闪烁

开发者工具（Chrome，谷歌浏览器）

点击三个小点 第一行可以控制调试面板位置

Emmet

Emmet的前身是Zen coding,它使用缩写,来提高html/css的编写速度。

  1. 生成标签 直接输入标签名 按tab键即可 比如 div 然后tab 键， 就可以生成

  2. 如果想要生成多个相同标签 加上 * 就可以了 比如 div*3 就可以快速生成3个div

  3. 如果有父子级关系的标签，可以用 > 比如 ul > li就可以了

  4. 如果有兄弟关系的标签，用 + 就可以了 比如 div+p

  5. 如果生成带有类名或者id名字的， 直接写 .demo 或者 #two tab 键就可以了

  6. 如果生成的div 类名是有顺序的， 可以用 自增符号 $

    Emment语法

综合案例下载

个人公众号

qrcode_for_gh_ccade8c7ee1c_344

posted @ 2020-06-16 16:48  赎罪的码农  阅读(152)  评论(0)    收藏  举报