前端学习（一）CSS基础

最新推荐文章于 2022-07-05 00:13:17 发布

一_嚿_饭团

最新推荐文章于 2022-07-05 00:13:17 发布

阅读量213

点赞数

分类专栏：前端学习

本文链接：https://blog.csdn.net/y1yo2/article/details/74534076

版权

前端学习专栏收录该内容

18 篇文章 0 订阅

订阅专栏

CSS，HTML，JavaScript的关系
标签元素HTML：网页的内容结构
CSS：网页的排版布局
JavaScript：网页的事件处理，与用户交互

CSS语法：
选择符{ 属性：属性值;} -> 声明

CSS写在哪里：
（1）.内联：直接写在HTML标签里面
（2）.嵌入：写在当前文件中
（3）.外部：写在单独的一个文件中

内联：HTML标签的style=”“中，多条用分号隔开
嵌入：在<head></head>之间，<style type = "text/css"><style>
外部（外联式）：“.css“扩展名，在<head></head>内，<link href="文件路径.css" rel="stylesheet" type="text/css" />
优先级：内联>(嵌入，外部)，就近原则

选择器：
标签，类，ID，
子选择器，包含（后代）选择器
通用选择器，伪类选择器，分组选择器

标签选择器：p{样式} span{样式}
类选择器：.className{样式}
ID选择器：#idName{样式} （不以数字开头，Mozilla／Firefox不起作用）
ID <=> 类：
标签可设置多个类如：<span class="class1,class2">
ID有高优先级，唯一特性

子选择器：即大于符号(>)，选择指定标签元素的第一代子元素，如：.food>li{boorder:1px,solid,red;}
后代选择器：即加入空格( )，选择指定标签元素的后辈元素，如：.first span{color:red;}
总结：>用于元素的第一代后代，空格用于元素的所有后代

通用选择器：使用星号(*)，匹配html中所有标签元素，如：*{color:red;}
分组选择器：使用逗号(,)，想为html中多个标签元素设置同一个样式，如：h1,span{color:red;}
伪类选择器：给标签的某种状态设置样式，
如，a:hover{color:red;}为a标签鼠标滑过的状态设置样式

CSS的特性：
1).继承性：
不可继承的：盒子内外边距、定位等
2).特殊性：
根据权值判断使用样式
权值的规则：标签为1，类选择符为10，ID选择符为100
权值相同使采用就近原则
3).重要性：
浏览器默认样式<网页制作者样式<用户自己设置的样式
!important是个例外，如，p{color:red!important;}

元素类型：
1.块级元素：<div>,<p>,<form>,<h1>,<ul>,<li>,可设置display:block将元素设置为块级元素
1).一个块级元素独占一行
2).元素的高度、宽度、行高、顶和底边距可设置
3).元素宽度在不设置的情况下，是它父容器的100%
2.内联元素：<span>,<a>,<label>,<strong>,<em>，可设置display:inline将元素设置为行内元素
1).和其他元素在一行上
2).元素的高度、宽度、顶部和底部边距不可设置
3).元素的宽度就是它包含的文字或图片的宽度，不可改变
3.内联块状元素：设置display:inline-block
1).和其他元素在一行
2).元素高度、宽度、行高、顶和底边距可设置

盒模型：

CSS布局：
1.流动模型(Flow)
标准文档流中，标签元素总是从上而下，从左到右进行顺序排列

2.浮动模型(Float)
实现块状元素在同一行，.class1{float:left} .class2{float:right}
为了消除浮动模型带来的负面影响，即父容器无法包容跳出文档流后的元素，两种清除浮动的方法：
1).新增标签，类为clearfix

<style>
        .clearfix{
            clear: both;
        }
    </style>
</head>
<body>
    <div class="outer">
        <div class="inner"></div>
        <div class="inner"></div>
        <div class="inner"></div>
        <div class="clearfix"></div>
    </div>
    <div class="footer"></div>
</body>
</html>

2).使用 :after 为元素
为父容器增加类型clearfix，css中有.clearfix:after和.clearfix

    <style>
        .outer{
            border: 1px solid black;
            width: 300px;
        }
        .clearfix:after{  /*最简方式*/
            content: '';
            display: block;
            clear: both;
        }
        /* 新浪使用方式
        .clearfix:after{ 
            content: '';
            display: block;
            clear: both;
            height: 0;
            visibility: hidden;
        }
        */
        .clearfix{ /*兼容 IE*/
            zoom: 1;
        }
    </style>
</head>
<body>
    <div class="outer clearfix">
        <div class="inner"></div>
        <div class="inner"></div>
        <div class="inner"></div>
    </div>
    <div class="footer"></div>
</body>
</html>