CSS基础

Posted 2022-09-17 sauronblog

tags:

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

1.细线表格

<style>
    table 
      border: 1px solid red;
      border-collapse: collapse;  /*将单元格之间的间距给合并*/
    
    td 
      border: 1px solid red;
    
  </style>

2.圆角边框

border-radius:用来设置圆角边框的

每个边角都有两面，一个是水平方向，一个是垂直方向

3.css三大特性

层叠性:是浏览器处理样式冲突的一种能力

<style>
    .box 
      color: blue;
    
    .box 
      color: red;   /*如果样式有冲突的时候，后面的会将前面的给层叠性*/
    
</style>

继承性:子元素可以继承父元素的一些样式

 <style>
    /* p,span 
      font-size: 50px;
     */
    .box 
      font-size: 50px;
      color: orangered;
    
  </style>
</head>
<body>
  <div class="box">
    abaagasdfasdfa
    <p>胸前挂钥匙</p>
    <span>开心</span>
  </div>
</body>

特殊情况：

a标签中的字体颜色是不会继承父元素的，需要自己单独设置.

font-weight属性对h系列标签不起作用.

优先级

!important>行内>id>类>标签>继承

!import 无穷大

行内 1000

id 100

类 10

标签 1

继承 0

注意：继承来的!important不起作用.

特殊情况：

a标签中的字体颜色是不会继承父元素的，需要自己单独设置.

font-weight属性对h系列标签不起作用.

优先级

!important>行内>id>类>标签>继承

行内 1000

id 100

类 10

标签 1

继承 0

注意：继承来的!important不起作用.

4.图片与背景图片的区别

如果当前布局中要突出的是图片的作用，那用img标签

如果当前仅仅是用一个小图片做为装饰的话，则要使用背景图片

5.页面中的布局方式

标准流：像DIV，p等这样的块级元素，自己独占一行，可以设置宽高，而像span,a等这样的行内标签，是一行可以并列显示多个，像这样页面显示方式都是遵循标准流。

浮动：脱离于标准流，不受标准的控制或约束

定位：脱离于标准流

6.浮动

浮动主要是为了解决页面中块级元素在一行并列显示的问题

浮动的元素，无论是块级元素还是行内元素，都相当于是变成了行内块元素，行内块元素还是行内元素。

7.项目开发流程

1.配置开发环境

用什么样的编辑器数据库等等...

2.创建项目文件夹

创建项目文件夹的目的，是为了统一方便的管理项目，方便以后的维护和升级

3.项目文件夹中的文件组成

index.html 一个项目的主页面

css文件夹用来放置页面中所有的样式文件

images 用来放置页面中的所有的图片

js js文件夹

音频/视频

4.进行页面布局的开发

一般的顺序是从左往或，从上往下

5.项目的初始化

为了布局的方便，顺利，以后后期维护的高效，需要将页面中标签的原始默认样式给清除掉

8.标签的实例化

就是给一个标签设置宽，高，背景颜色或边框，为了让此标签在页面上显示出对应的样式来

9.相邻行内块的问题

两个相邻的行内块在布局的时候，挨在一块，之间会有3--5像素的间距，可以使用浮动来解决

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