CSS基础

Posted 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基础的主要内容,如果未能解决你的问题,请参考以下文章

HTML/CSS回顾之CSS基础

Css3之基础-2 Css 基础选择器

css实现基础图表

CSS基础

五、css基础(二)

css基础教程:对css代码精简