当前位置： 移动技术网 > IT编程>网页制作>HTML > CSS概括总结

CSS概括总结

2020年07月12日  | 移动技术网IT编程  | 我要评论

css总结

一、概念

CSS(Cascading Style Sheet):层叠样式表
主要作用：布局、美化
特点：
  对缩进换行不敏感，建议一个属性写一行，后期可以通过css压缩
  除了最后一条属性，其他属性均需要加上分号

二、css引用方式

1.外部导入:用标签引用外部的css文件，将样式引入到html中来

<link rel="stylesheet" href="./css/reset.css">

2.内部引用：在头部使用标签，在其内部使用样式。

<style>
    body{ font-size:14px}
</style>

3.在标签内使用，使用style属性将当前的标签样式改变

<div style="color:red"></div>

三、四种选择器

1.三种选择器
 (1)标签选择器：选中页面同类型的标签

h3{ font-style:normal;}

 (2)ID选择器:先给标签起ID名，然后通过#ID选中

<!-- 标签起id名 -->
<div id="one"></div>


/*css 选中*/
#one{
    width:300px;
    height:300px;
}

 (3)class选择器:先给标签起类名，然后通过.选中

<!-- 标签起class名 -->
<div class="two">
</div>

/* css选中 */
.two{
    width:50px;
    height:50px;
}

 (4)伪类选择器:最常用的，就是a标签的hover伪类。

<!-- a标签 -->
<a href="http://www.baidu.com">百度</a>


/* a标签的伪类选择器使用 */
a:hover{
    color:red;
}

2.起名注意点：

  • 以英文字母开头
  • 区分大小写
  • 可以有数字、字母、下划线、短横线

四、文字属性

 1.font-size: 设置字体大小 单位是px

font-size: 50px;

注意点

– 默认情况下，一个浏览器的的字体大小是16px
– 对于一个正常的网站来说，12px和14px用的是最多的
– 对于浏览器来说，一个文本字体可以非常大
– 通常浏览器为了保证用户可以看到字体，对于谷歌浏览器来说，默认最的字体大不是12px。
– 设置字体大小，是有继承性(对于font-size来说，给父元素设置了，子元素也会起作用，这叫CSS属性的继承性)

 2.font-weight:用来设置字体是否加粗

bold  加粗
normal 不加粗

注意点
– 有人喜欢使用数字 100 200 300
– 也有继承性

 3.font-style：用来设置字体是否倾斜

italic 倾斜
normal 不倾斜

注意点
有继承性

 4.font-famliy:字体设置

font-family: "黑体","微软雅黑"

注意点
– 设计师让写什么字体就写什么字体
– 如果没有写，默认是宋体
– 如果一个网页显示一个字体，前提是用户电脑上有这个字体文件，基本上所有的用户电脑上都有宋体
– 设置字体时后面可以跟多个，第1个不起作用，就找第2个，第2个也不起作用，找第3个，都不起作用，使用宋体

 4.color：设置字体的颜色

color:blue;

注意点
– 对于a标签来说，你要设置a标签的颜色，必须选中它。

 4.font: 是一个复合属性

font:font-style font-weight font-size/line-height font-family;

注意点
– font-style,font-weight 可以不写 如果写了 也可以交换位置
– font-size,font-family 必须写 位置不能变
– 由于font-style,font-weight通常都是normal，所以来，一般不写
– 中间使用空格隔开
– line-height 写了一个倍数 1.5 表示行高是fontsize的1.5倍

四、文本属性

文本：很多的文字构成文本

1.text-decoration：用来设置文本的修饰线

underline 下划线  
overline 上划线   用不到
line-through  删除线
none  默认   对于a标签来说，它的默认值是underline

.udl{ text-decoration: underline; }
a{ text-decoration: none; }
.lt{ text-decoration: line-through; }

场景：
1）超连接基本上会去掉下划线 当然有的a标签是没有去掉
2）商品的原价 使用删除线
…

2.text-indent: 首行空两格

单位：em    一个em就表示一个汉字的宽度   2em

对于一个Logo来说，一般使用h1包起来，为了SEO，通常也会放一个文字在h1中。但是我们只想显示logo，不想显示文字，此时就可以让文字跑到浏览器外面去。

 .ti{ text-indent: 2em; }
 .logoText{ text-indent: -2000em; }

3.text-align: 设置文本在盒子中的对齐方式

left:左对齐
right：右对齐
center：居中

4.line-height: 用来设置行高

如果在一个盒子中有文本，盒子的高度和文本的行高一样，那么就垂直居中了。
可以在font属性中进行设置：font:14px/1.5 “宋体”;

p{
    line-height:15px;
}
/* 设置倍数 */
h3{
    line-height:1.5
}

五、层叠性

研究是对于同一个盒子来说，如果设置了多个样式，具体对对哪一个标签起作用。

1.交集选择器：

div：标签选择器
.box：类选择器
#item：ID选择器
div.box：交集选择器 表示选中div并且DIV中有一个类是box

在调试面板中，样式也是分多类的：
    1）继承祖先元素的样式
    2）标签有自己默认的样式  user agent stylesheet
    3）我们自己写的样式

层叠性：
a.自己有样式 > 继承 > 默认的
b.行内样式 > 内部 = 外部 (就近原则)
c. ID > CLASS > DIV
d.特殊值
id 0100
class 0010
p 0001
谁的钱多算谁

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>层叠性</title>
    <!-- <link rel="stylesheet" href="./out.css"> -->
    <style>
        /* .father{ color: red; }
        .son{ color: yellow; } */

        /* .son{
            color: yellow;
        } */

        /* .son{
            color: skyblue;
        } */

        /* .son{ color: yellow; }
        p{ color: red; } */
        /* #box{ color: skyblue; } */
        
       #box .son .x{ color: red; }  /* 120 */ 
       .father #item #y { color: yellow; }  /* 210 */ 
       #box #item #y{ color: blue; }  /* 300 */ 
       .father .son .x{ color: pink; }  /* 30 */ 
       div p span{ color: powderblue; }  /* 3 */ 
        
    </style>
    
</head>
<body>
    <div class="father" id="box">
        <p class="son" id="item">
            <span class="x" id="y">SON</span>
        </p>
    </div>
</body>
</html>

六、盒子模型

一个标签是一个矩形的，就是一个盒子，盒子简单模型主要有6大属性。

盒子的内容区域：是width和height构成的区域
    
盒子的内填充区域：盒子内容区域与边框之间的间隙
   
盒子的外填充区域：边框以外的间隙

1.width和height

盒子的宽和高，width和height构成的区域

2.border: 设置盒子边框

边框的粗细  1px  2px
    边框的样式  solid
    边框的颜色  red    
    简写：border:1px solid red;

3.padding:内填充

  也叫补白  内容和边框之间的间隙

padding:30px;分四个方向 也可以单独设置某个方向的padding
padding-top:20px;
padding-right:20px;
padding-bottom:20px;
padding-left:20px;
padding:20px; 四个方向的padding都是20px
padding:20px 40px; 上下padding是20px 左右padding是40px;
padding:20px 40px 60px; 上是20px; 左右是40px；下是60px;
padding:20px 40px 60px 80px; 上 右 下 左 钟表顺时针

4.margin:外填充

盒子边框之外的间隙,与padding的用法比较类似

5.background：用来设置盒子的背景

背景的颜色： background-color
背景的图片： background-image

6.一个盒子在网页上占据的空间

宽度：内容区域（width）+内填充区域(左右)+边框（左右）+外填充区域（左右）
高度：内容区域（height）+内填充区域(上下)+边框(上下)+外填充区域(上下)

七、标签分类

1.盒子的分类：

块级盒子（块级元素）

div hn p ul/ol/li/dl/dt/dd form 表格相关的

行内盒子（行内元素）

span a em strong i b lable button

行内块盒子（行内块元素）

input img

2.标签分类的属性作用

  • 对于一个块级盒子（块级元素）来说，盒子模型的6大属性都起作用（width,height,padding,border,margin,background）。
  • 对于一个行内盒子（行内元素）来说，width,height不起作用，margin和padding在垂直方向上不起作用，其它的都OK。
  • 对于一个行内块盒子（行内块元素）来说，除了不能独占一行外，其它的特点和男盒子一样。

八.三大布局

三大布局分别为：流动布局、浮动布局、层布局

1.流动布局

流动布局：最简单，最原始，什么也不需要设置的布局，功能非常弱。
块元素盒子：独占一行，在从网页的最上面的开始
行内元素盒子：并排显示，如果一行装不了，它会自动换行。

2.浮动布局

（1）大部分标签都有默认的padding和margin，可以去掉：
    *{ margin:0; padding:0 }  *表示选中所有的标签  叫通配符选择器

（2）标准文档流：
    对于一个块级元素来说，独占一行，盒子从网页最上面开始摆放，盒子模型的6大属性对男盒子都起作用
    对于一个行内元素来说，并排显示，满一行，自动换行，也是从网页最上面开始摆放，盒子模型的6大属性，其中widht和height不起作用，margin和padding在垂直方向上不起作用

（3）浮动可以半脱离标准文档：（出国了）  只要出国了，之前的国家中的法则就有可能不适用了
    1）父元素高度就变成0了  父元素高度塌陷了
    2）一个盒子浮动了，他的属性会发生变化，行内元素会转变为块元素，但是块元素不会转化为行内元素

（4）浮动会造成影响：
    1）浮动对父元素造成影响，让父元素的高度塌陷了
    2）对兄弟元素也会造成影响 

（5）如何清除浮动元素对父元素所造成的影响（清除浮动）：
    1）overflow:hidden   overflow:溢出   hidden：隐藏   处理溢出   可以清除浮动元素对父元素所造成的影响  （小偏方）
    2）手动给父元素加高度（基本不用），父元素的高度是靠子元素撑起来
    4）伪类

（6）如何清除浮动元素对兄弟元素所造成的影响（清除浮动）：
    1）clear:both   专业用来清除浮动

本文地址：https://blog.csdn.net/weixin_45344023/article/details/107265834

您可能感兴趣的文章:

如对本文有疑问， 点击进行留言回复！！

相关文章:

验证码：
最近更新的文章
大家感兴趣的文章
移动技术网