css第一天之--css简介、选择器、字体属性、文本属性和引入方式

本文链接：https://blog.csdn.net/weixin_44149146/article/details/109438561

一、css简介

css应用场景：美化网页，布局页面
css中文名称：层叠/级联样式表（Cascading style Sheets）；是一种标记语言

css语法格式：

选择器： {
 /* 样式声明  */
属性： 值；
属性： 值；
}

选择器：改谁的样式；
样式声明：改成是么样式。
属性和值之间用 : 隔开
属性之间使用 ; 隔开

写在HTML中的位置：

<head>
  <meta charset="UTF-8" />
  <title>体验CSS语法规范</title>
  <style>
    /* CSS 写在这里 */
  </style>
</head>

二、选择器

1、标签选择器

标签选择器是使用HTML标签名称作为选择器

标签名 {
   属性： 值；
   属性： 值
   ......
}

作用：把一类标签选择出来，统一修改样式；
优点：快速、统一设置同类型标签的样式；
缺点：没有差异，只能选择全部当前标签。

2、类选择器

  .class {
       属性： 值
       属性： 值
        ......
}

可以选择一个或多个标签，也可以重复使用
注：给标签增加class属性，属性值是选择器类名，写属性值时应注意不要加 . 点！
多类名：在标签的class属性中使用多个类名，类名之间用空格隔开。

<p class="bold pink">多类名</p>

3、id选择器

   #id {
       属性： 值
       属性： 值
        ......
}

id选择器只能使用一次，因为id是唯一的。
id选择器只为特定元素设置样式，常与JavaScript联用。

4、通配符选择器

  * {
       属性： 值
       属性： 值
        ......
}

给所有的标签设置样式，且不需要调用。

三、字体属性

1.font-family 设置字体系列

 div {font-family: Arial,"Microsoft Yahei", "微软雅黑";}

注：

各种字体在之间使用英文状态下的逗号隔开；
尽量使用系统自带字体，能保证任何用户浏览都能正确显示。

2.font-size 设置字体大小

p {
  font-size: 20px;
}

单位是px像素；
不同的浏览器默认字体大小不一样，要尽量给一个明确的值大小。

3.font-weight 设置字体粗细

p {
   /* font-weight: 400; 字体正常粗细 */
   font-weight: 700; /*字体加粗显示*/
}

不需要单位；
可取值400（normal）正常粗细、700（bold）加粗。

4.font-style 字体样式

 p {
    /* font-style: italic;  斜体显示*/
    font-style: normal;
 }

属性值：normal（无样式，常把<em>/<i>改为不倾斜显示）
italic 倾斜显示。

5.font 复合写法

 body {
    font: font-style font-weight font-size/line-height font-family;
 }

注：

复合属性写法顺序不能乱；
至少保留 :font-size 和font-family,否则无效。

四、文本属性

1.color 文本颜色

div {
   color: blue;
}

定义颜色方式：
- 预定义颜色：red、green、blue 等；
- 十六进制：#ff00ff 等; (最常用)
- RGB代码：rgb(255,0,0) 或 rgba(255,0,0, 0.5).

2.text-align 文本水平对齐方式

div {
    text-align: center;
}

属性值：left（水平左对齐默认）、center（水平居中对齐）、right（水平右对齐）。

注：无法给行内元素设置对齐，例如：span 、a、em等。

3.text-decoration 文本装饰

div {
    text-decoration: none;
}

属性值：none 、 underline（下划线）、line-through（删除线）、 overline（上划线）

去除a的下滑线：text-decoration: none;

4.text-indent 文本缩进

div {
    text-indent: 2em;
}

为文字段落设置首行缩进；
常用单位em，1em=当前元素一个文字的大小。

5.line-height 行高

  div {
     line-height: 30px;
  }

作用：

控制文本行与行之间的距离；
设置文本在盒子中垂直居中对齐 line-height: 盒子的高度; 。

五、css引入方式

1.行内样式表

在元素标签内部的 style 属性中设定 CSS 样式
<p style="color: blue;">行内样式表</p>
使用在简单的修改

2.内部样式表

写到HTML页面中，单独放到<style></style>中

 <head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        em {
            font-style: normal;
        }
    </style>
</head>

3.外部样式表

单独写到css文件中，在html页面中引入css文件；

  <head>
    <meta charset="UTF-8">
    <title>Document</title>
    <link rel="stylesheet" href="css文件路径" >
</head>

结构和样式完全分离。

好了，今天就到这里了，感谢观看！
今天你努力写代码了吗？