CSS知识总结

最新推荐文章于 2023-04-27 18:49:30 发布

yhr562605133

最新推荐文章于 2023-04-27 18:49:30 发布

阅读量129

点赞数

分类专栏：学习笔记

本文链接：https://blog.csdn.net/qq_33060225/article/details/84998745

版权

学习笔记专栏收录该内容

35 篇文章 0 订阅

订阅专栏

CSS

1. 在标签上设置style属性：

background-color:#2459a2;
height:48px;
       ...

2. 编写css样式:

可以写在标签的style属性里

  <div style="background-color:#2459a2;height:48px;">ff</div>

写在head里，style标签中写样式

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        #i1{
            background-color:#2459a2;height:
            48px;
        }

        .c1{
             background-color:#2459a2;
             height:10px;
        }

        input[type='text']{width:100px;height:200px;}
    </style>
</head>

几种选择器：

- id 选择器：（用的少）知道
           <style>
               #i1{
                     background-color:#2459a2;height:
                     48px;
                      }
          </style>
 - class 选择器：（用的最多）最推荐
            .名称{

                     }
                 <标签 class="名称"> <标签 />
 - 标签选择器：要会
              div {
                  }
                  所有的div都此样式

 - 层级选择器 要会
            .c1 .c2 div {
                  }
                  class=c1 下 class=c2下的div

 - 组合选择器（逗号）要会
            #c1,c2,c3{}
                  逗号前后都可以用

 - 属性选择器 必会
                  对选择到的标签再通过属性再进行一次筛选

PS:优先级：标签上的style优先，其他的就按照编写的顺序，就近原则

3.css样式文件也可以写在单独文件中

写在css文件中用link加载就可以直接使用css里的样式

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="css/commons.css">
</head>
<body>

<div class="c1 c2">de</div>
</body>
</html>

4.css 的注释 / * --------- * /

5. 边框

宽度：样式：颜色
border：4px ;dotted ;red;

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <div style="border:1px solid red;">adad</div>
    <div style="height:38px;width:80%;border:1px solid red;font-size:16px;text-align:center;line-height:48px;font-weight:1000;">1</div>
</body>
</html>

6.用的比较多的属性：必须要会

height , 高度
width, 宽度像素，百分比也可以
text-align:center, 水平方向居中
line-height, 垂直方向根据标签高度居中
color, 字体颜色
font-size, 字体大小
font-weight 字体加粗

7. float 应用最广的

< float:right> < float:left>

让标签浪起来，块级标签也可以堆叠
父div管不住的时候，在内部最后面加上：< div style=“clear:both;”></ div>

8.display

display:none; 让标签消失（后面写js会用比如弹窗一开始就是隐藏，点开就显示）
display:inline div变span
display:block span变div
display:inline-block; 具有inline,默认自己有多少占多少
具有block,可以设置高度，宽度，padding,margin

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
   <div style="background-color:red;display:inline">aa</div>
   <span style="background-color:red;display:block">aa</span>
</body>
</html>

dispay总结：

行内标签：无法设置高度，宽度，padding,margin
块级标签：设置高度，宽度，padding,margin

9.边距

内边距 padding,
外边距 marigin, marigin:0 auto
margin-left 外边距距离左边的位置
margin-top 外边距距离顶部的位置

margin和padding是在html中的盒模型的基础上出现的，margin是盒子的外边距，即盒子与盒子之间的距离，而padding是内边距，是盒子的边与盒子内部元素的距离。

说明
这个简写属性设置元素所有内边距的宽度，或者设置各边上内边距的宽度。行内非替换元素上设置的内边距不会影响行高计算；因此，如果一个元素既有内边距又有背景，从视觉上看可能会延伸到其他行，有可能还会与其他内容重叠。元素的背景会延伸穿过内边距。不允许指定负边距值。

注释：不允许使用负值。

例子 1
padding:10px 5px 15px 20px;
上内边距是 10px
右内边距是 5px
下内边距是 15px
左内边距是 20px
例子 2
padding:10px 5px 15px;
上内边距是 10px
右内边距和左内边距是 5px
下内边距是 15px
例子 3
padding:10px 5px;
上内边距和下内边距是 10px
右内边距和左内边距是 5px
例子 4
padding:10px;

<body style="margin:0 auto;">
    <div class="pg-header">
        <div style="width:980px;margin:0 auto;">
            <div style="float:left;">收藏本站</div>
            <div style="float:right;">
                <a>登录</a>
                <a>注册</a>
            </div>
            <div style="clear:both;"></div>
        </div>
    </div>
    <div>
        <div style="width:980px;margin:0 auto;">
            <div style="float:left;">
                logo
            </div>
            <div style="float:right;">
                <div style="height:50px;width:100px;background-color:#dddddd;">购物车</div>
            </div>
        </div>
    </div>
    <div style="background-color:red;">
        <div style="width:980px;margin:0 auto;">
            <div style="float:left;">
                logo
            </div>
            <div style="float:right;">
                <div style="height:50px;width:100px;background-color:#dddddd;">购物车</div>
            </div>
            <div style="clear:both;"></div>
        </div>
    </div>
    <div style="width:300px;border:1px solid red;">
        <div style="width:96px;height:30px;border:1px solid red;float:left;"></div>
        <div style="width:96px;height:30px;border:1px solid red;float:left;"></div>
        <div style="width:96px;height:30px;border:1px solid red;float:left;"></div>
        <div style="width:96px;height:30px;border:1px solid red;float:left;"></div>
        <div style="width:96px;height:30px;border:1px solid red;float:left;"></div>
        <div style="width:96px;height:30px;border:1px solid red;float:left;"></div>
        <div style="clear:both;"></div>
    </div>

</body>

10.position

(1)fixed => 固定在某个位置
(2)relative + absolute:
absolute模块存放的位置是其父模块relative的相对位置

注意：
height: 400px;
width: 800px;
position: fixed;
background-color: white;
left: 50%;
top:50%;
margin-top: -200px;
margin-left: -400px;
border: 2px solid red;

中 left 50% top 50% 是指div的左上角那个点的位置
要想边框居中加入 margin-top: -200px;margin-left: -400px;调整位置

<div style="position:relative;">
     <div style="position:absolute;">
     </div>
</div>

11.opcity：0.5 透明度

12.z-index :层级顺序，谁大在谁上

13.overflow

hidden 隐藏图片
auto 当内容增多时，增加滚动条

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .pg-header{
            position: fixed;
            right: 0;
            left: 0;
            top:0;
            height: 48px;
            background-color: #2459a2;
            line-height: 48px;

        }
        .pg-body{
            margin-top: 50px;

        }
        .w{
            width: 980px;
            margin: 0 auto;
        }
        .pg-header .menu{
            display: inline-block;
            padding: 0 10px 0 10px;
            color:white;
        }
        /*当鼠标移动到当前标签上时，以下css属性才生效*/
        .pg-header .menu:hover{
            background-color: blue;
        }
    </style>
</head>
<body>
    <div class="pg-header">
        <div class="w">
            <a class="logo">LOGO</a>
            <a class="menu">全部</a>
            <a class="menu">42区</a>
            <a class="menu">1024</a>
        </div>
    </div>
    <div class="pg-body">b</div>
</body>
</html>

14.backgrond

background-image:url(‘image/4.gif’); # 默认,div大，图片重复访
background-repeat: repeat-y;
position抠洞:
background-position-x:
background-position-y:
background-position: 10px 10px 跟上面x y一样

综合小练习登录框
在用户名输入框左侧显示一个用户头像的图片

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

   <!--综合小练习 综合了今天所有东西-->
    <div style="height: 35px;width: 400px;position:relative;">
        <input type="text" style="height:35px;width:370px;padding-right: 30px"/>
        <span style="background-image:url(1.png);
        height:16px;
        width: 16px;
        display:inline-block;
        position: absolute;
        right: 0;
        top:10px;"></span>
    </div>
</body>
</html>

yhr562605133

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
CSS知识总结

CSS1. 在标签上设置style属性：background-color:#2459a2;height:48px; ...2. 编写css样式:可以写在标签的style属性里 &amp;amp;amp;amp;amp;amp;lt;div style=&amp;amp;amp;amp;amp;quot;background-color:#2459a2;height:48px;&amp;amp;amp;amp;amp;quo
复制链接

扫一扫