码迷,mamicode.com
首页 > Web开发 > 详细

CSS基础(4)

时间:2019-09-01 10:34:22      阅读:96      评论:0      收藏:0      [点我收藏+]

标签:优先级   head   border   浮动   了解   span   项目文件   元素   中标   

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基础(4)

标签:优先级   head   border   浮动   了解   span   项目文件   元素   中标   

原文地址:https://www.cnblogs.com/sauronblog/p/11441408.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!