CSS基础

Posted 2022-09-17 sauronblog

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了CSS基础相关的知识，希望对你有一定的参考价值。

1.CSS的发展历程

随着html的成长,HTML本身自带了一些样式功能，这就导致了HTML越来越杂乱，HTML页面也越来越臃肿, 于是CSS便诞生了.

2.CSS介绍

CSS(Cascading Style Sheets)

CSS通常称为CSS样式表或层叠样式表（级联样式表），主要用于设置HTML页面中的文本内容（字体、大小、对齐方式等）、图片的外形（宽高、边框样式、边距等）以及版面的布局等外观显示样式。

简单来说一句话，就是用来给HTML标签设置外观样式的，让我们的HTML页面更加的丰富多彩.

3.css的书写位置(重点)

行内式就是写在标签内添加样式

<div style="color:red;font-size:130px;">今天开始学习CSS样式结构</div>

内嵌式在同一个页面的head标签的一对style标签内写样式页面结构比较简单

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>内嵌样式的写法</title>
  <style type="text/css">
    div 
      color:cyan;
      font-size: 80px;
    
    /* 内嵌样式的写法，是写在同一个页面中的head标签的style标签内 */
  </style>
</head>
<body>
  <div>但行好事，莫问前程</div>
</body>

外链式就是将样式写在一个单独的css文件当中，然后使用link标签引入到对应的html文件当中, 当做大项目的时候，提倡结构和样式完分离。

4.chrome浏览器的控制台

在页面中单击右键--->检查--->可以看到对应的标签，在右侧可以看到对应的样式，可以通过控制台来检查对应的样式和排错.

5.选择器

要想给页面中的标签设置对应的样式，首先得先找到对应的标签，

在CSS中，执行这一任务的样式规则部分被称为选择器（选择符）。

直白的说，选择器就是用来获取标签的一种方式。

标签选择器 会将当前页面中所有的标签都设置上同样的样式

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>标签选择器</title>
  <style>
    div 
      font-size: 60px;
      color: blue;
      color: red;
      /* 当一个属性被设置了多次的时候，默认以最后一次为主 */
    
  </style>
</head>
<body>
  <div>但行好事，莫问前程</div>
  <p>中华人民共和国</p>
  <div>愿岁月静好,愿现世安稳</div>
</body>
</html>

类选择器 只给有对应类名的标签设置样式

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>标签选择器</title>
  <style>
    div 
      font-size: 60px;
      /* color:blue;
      color: red; */
      /* 当一个属性被设置了多次的时候，默认以最后一次为主 */
    
    .box 
       color: blue;
    
    .demo 
      color: red;
    
  </style>
</head>
<body>
  <div class="box">但行好事，莫问前程</div>
  <p>中华人民共和国</p>
  <div class="demo">愿岁月静好,愿现世安稳</div>
</body>
</html>

类选择器的命名规范：

1.如果类名比较长或是有多个词的话，可以使用中划线

2.避免使用下划线，下划线留给js中的变量或是id名使用

3.绝对不要使用纯数字或数字开头来命名类名，尽量避免使用中文命名，推荐使用英文单词或拼音来命名

多类名选择器

就是将多个类的样式同时作用于同一个标签上

id选择器

用法和类选择器是一样的，区别：

类选择器就相当于是人的名字，在一个页面中，可以有多个重复的

id选择器就相当于人的身份证号码，一个页面中不能出现相同的两个ID名

id多用于js当中来使用

*通配符选择器

*指的是通配符选择器，会将页面中所有的标签元素都选择中，效率比较低，用的不多。

在写一个页面的小案例的时候，或许会用到，常常是用来清除掉当前页面的所有的标签的默认内外间距。

6.字体设置

1.font-size字体大小

font-size px em

2.font-family 字体样式

font-family:"宋体,仿宋,楷体,小篆,微软雅黑"

微软雅黑或"microsoft yahei"用的是最多的

3.font-weight 字体粗细

给文字内容设置粗细，代替b或strong

4.font-style 字体风格正常还是倾斜

给文字设置字体风格，用来代替i或em

5.font字体合写

font字体是一个复合属性，是由font-style,font-weight,font-size,font-family组成的。

如果简写的话，有两个是必须的，font-size,font-family是必须要写的。

7.链接伪类

可以用于页面中设置一些特殊的效果

:link 未访问过的默认状态只对a标签起作用

:visited 已经访问过的状态只对a标签起作用

:hover 鼠标悬停在上面时的效果对任何标签都起作用

:active 选定时的状态对任何标签起作用

8.总结

css样式是用来给页面中的标签设置样式的，让页面更加的丰富多彩

书写的位置：行内内嵌外链

学会使用chrome浏览器的控制台进行查看html骨架或css样式

基本选择器

标签选择器

类选择器

多类名选择器

id选择器

通配符选择器

链接伪类选择器

:hover link visited active

字体样式设置

font-style 字体风格正常还是倾斜可以代替 i em

以上是关于CSS基础的主要内容，如果未能解决你的问题，请参考以下文章