CSS基础知识

最新推荐文章于 2024-08-20 15:48:17 发布

清辞-

最新推荐文章于 2024-08-20 15:48:17 发布

阅读量156

点赞数 3

分类专栏： HTML+CSS 文章标签： css css3

本文链接：https://blog.csdn.net/hccccccccccccc/article/details/120623122

版权

HTML+CSS 专栏收录该内容

10 篇文章 1 订阅

订阅专栏

基础认知

CSS简称层叠样式表 Cascading style sheets 作用是给页面中HTML标签设置样式

在这里插入图片描述

其中CSS有三种引入方式，分别是内嵌式，外联式和行内式

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <!-- 内嵌式 -->
  <!-- <style>
    p {
      color: red;
    }
  </style> -->
  
  <!-- 外联式 -->
  <!-- <link rel="stylesheet" href="./02.css"> -->
</head>
<body>
  <p>我是一个p标签</p>
  <!-- 行内式 -->
  <p style="color: green;">我也是一个p标签</p>
</body>
</html>

基础选择器

标签选择器

通过标签名，找到页面中所有这类标签，设置样式，选择的是一类标签，并不是单独的某一个；无论嵌套关系有多深，都能找到对应的标签。

    p {
      color: red;
    }

    /* div {
      color: red;
    } */

类选择器

所有标签上都有class属性，它的属性值称为类名
类名可以由数字，字母，下划线，中划线组成，但不能以数字或中划线开头
一个标签可以同时有多个类名，类名之间用空格隔开
类名可以重复，一个类选择器可以同时选中多个标签

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    .red {
      color: red;
    }

    .yellow {
      color: yellow;
    }

    .pink {
      color: pink;
    }

    .big {
      font-size: 30px;
    }
  </style>
</head>
<body>
  <!-- 要求：让下面三个标签变成想要的颜色 -->
  <p class="red big">小红</p>
  <p class="yellow">小黄</p>
  <p class="pink">小粉</p>
  <p class="red">我也想变红</p>
</body>
</html>

id选择器

ID类似于身份证号码，在一个页面中是唯一的，不可重复的。
一个标签上只能有一个ID属性值
一个ID选择器只能选中一个标签

在这里插入图片描述

通配符选择器

找到页面中所有的标签，设置样式，目前来说只会在一种情况下遇到。
去除标签默认的margin和padding

在这里插入图片描述

字体和文本样式

四个常用的字体样式以及连写语法

font-size 字体大小，取指为数字+px 谷歌默认文字大小是16px

font-weight 字体粗细 700为粗，400为细

font-style normal正常 italic斜体字体。字体分为三种。

在这里插入图片描述

font-family 规则如下。从左往右按照顺序查找，如果电脑中未安装该字体，则显示下一个字体。如果都不支持，会根据操作系统，显示最后字体系列的默认字体
最后一项字体系列不需要引号包裹

 font-family: Impact, Haettenschweiler, 'Arial Narrow Bold', sans-serif;

在这里插入图片描述

有关样式的层叠问题，样式会进行覆盖，写在最下面的会生效。

字体font的属性连写 font:style weight size family (swsf)
只能省略前两个，如果省略就相当于设置默认值

文本样式

文本缩进text-indent
数字+px 或者数字+em（推荐）
因为1em=当前标签的font-size的大小，我们一般设置为text-indent=2em

文本水平对齐方式text-align，left-center-right
如果需要让文本水平居中，属性给文本的父元素设置

文本修饰 text-decoration
我们一般会设置为none 来清除a标签默认的下划线

在这里插入图片描述

水平居中的两种方法

text-align:center 能让文本 span a input img标签水平居中，此时我们需要给以上元素的父元素设置该属性
margin:0 auto 能让div p h 水平居中直接给当前元素本身设置即可，一般针对于固定宽度的盒子，如果大盒子没有设置宽度，此时会默认占满父元素的宽度

line-height行高控制一行的上下行间距
单行文本垂直居中可以设置line-height为文字父元素高度
网页精准布局 line-height:1可以取消上下间距

Chrome调试工具

在这里插入图片描述

常见颜色取值

在这里插入图片描述

清辞-

关注

3
点赞
踩
1

收藏

觉得还不错? 一键收藏
打赏
0
评论
CSS基础知识

基础认知基础选择器字体和文本样式Chrome调试工具
复制链接

扫一扫

专栏目录