前端基础 css笔记

来源：互联网发布：java设置test字体大小编辑：程序博客网时间：2024/05/19 18:41

css的四种引入方式

1.行内式--显示优先级最高<p style="background-color: rebeccapurple">hello</p>  2.嵌入式<head>    <meta charset="UTF-8">    <title>Title</title>    <style>        p{            background-color: #2b99ff;        }    </style></head>3 链接式<link href="mystyle.css" rel="stylesheet" type="text/css"/> 4.导入式<style type="text/css">          @import"mystyle.css"; //此处要注意.css文件的路径</style>注意：         导入式会在整个网页装载完后再装载CSS文件，因此这就导致了一个问题，      如果网页比较大则会儿出现先显示无样式的页面，闪烁一下之后，再出现网页的样式。      这是导入式固有的一个缺陷。使用链接式时与导入式不同的是它会以网页文件主体装载前装载CSS文件，      因此显示出来的网页从一开始就是带样式的效果的，它不会象导入式那样先显示无样式的网页，      然后再显示有样式的网页，这是链接式的优点。

css选择器

基本选择器:

 1.标签选择器p{color: red;} 2.id选择器      #id{color:red;} 3.class选择器   .class{color: red;} 4.通配选择器    *{color: red;}

组合选择器:

   E , F   多元素选择器   E   F   后代元素选择器   E > F   子元素选择器   E + F   毗邻元素选择器   E ~ F   普通兄弟选择器

伪类

anchor伪类：专用于控制链接的显示效果

        a:link（没有接触过的链接）,用于定义了链接的常规状态。        a:hover（鼠标放在链接上的状态）,用于产生视觉效果。        a:visited（访问过的链接）,用于阅读文章，能清楚的判断已经访问过的链接。        a:active（在链接上按下鼠标时的状态）,用于表现鼠标按下时的链接状态。        伪类选择器 : 伪类指的是标签的不同状态:                           a ==> 点过状态 没有点过的状态 鼠标悬浮状态 激活状态        a:link {color: #FF0000} /* 未访问的链接 */               a:visited {color: #00FF00} /* 已访问的链接 */         a:hover {color: #FF00FF} /* 鼠标移动到链接上 */        a:active {color: #0000FF} /* 选定的链接 */ 格式: 标签:伪类名称{ css代码; }        例：        <div class="outer">    <div class="top">top</div>    <div class="bottom">bottom</div></div>注意:一定是outer:hover 控制outer里某一个标签,否则无效<style>.outer:hover .bottom{         //有效background-color: yellow;        }        .top:hover .bottom{ //无效               background-color: yellow;        }</style>

before after伪类

      :before ----->p:before       在每个<p>元素之前插入内容           :after  ----->p:after        在每个<p>元素之后插入内容     例：p:before{content:"hello";color:red;display: block;}

选择器的优先级

1.css的继承

CSS继承是有限制的。有一些属性不能被继承，
如：border, margin, padding, background等。

2.css的优先级

 所谓CSS优先级，即是指CSS样式在浏览器中被解析的先后顺序。样式表中的特殊性描述了不同规则的相对权重，它的基本规则是：1 内联样式表的权值最高          style=""－－1000；2 统计选择符中的ID属性个数。   #id －－1003 统计选择符中的CLASS属性个数。 .class  －－104 统计选择符中的HTML标签名个数。p －－1按这些规则将数字符串逐位相加，就得到最终的权重，然后在比较取舍时按照从左到右的顺序逐位比较。

css属性操作

文本颜色：color:red;水平对齐方式:text-align:left;字体大小：font-size: 10px;字体样式：font-family: 'Lucida Bright';字体加粗：font-weight: lighter/bold/border/行高：line-height: 200px;a标签的下划线：text-decoration:none;首行缩进150px：text-indent: 150px;      字母间距：letter-spacing: 10px;  单词间距：word-spacing: 20px;  文本转换：text-transform: capitalize/uppercase/lowercase ; 文本转换，用于所有字句变成大写或小写字母，或每个单词的首字母大写背景：background-color: redbackground-image: url('1.jpg'); background-repeat: no-repeat;(repeat:平铺满) background-position: right top（20px 20px）;边框：border-style: solid;  --dotted,none  border-color: chartreuse;  border-width: 20px;position(定位)：position：relative;  相对定位  absolute;   绝对定位  fixed;      固定位置dispaly属性：display:none;    隐藏  block,内联标签设置为块级标签inline,块级标签设置为内联标签inline-block块级标签设置为内联标签margine外边框：居中应用：  margin: 0 auto;简写属性：margin:10px 20px 20px 10px；        上边距为10px        右边距为20px        下边距为20px        左边距为10pxmargin:10px 20px 10px;        上边距为10px        左右边距为20px        下边距为10pxmargin:10px 20px;        上下边距为10px        左右边距为20pxmargin:25px;        所有的4个边距都是25px

思考2：margin collapse（边界塌陷或者说边界重叠） 解决方法：overflow: hidden;1、兄弟div：上面div的margin-bottom和下面div的margin-top会塌陷，也就是会取上下两者margin里最大值作为显示值2、父子div：if 父级div中没有border，padding，inlinecontent，子级div的margin会一直向上找，直到找到某个标签包括border，padding，inline content中的其中一个，然后按此div 进行margin；

float属性

所谓的文档流，指的是元素排版布局过程中，元素会自动从左往右，从上往下的流式排列。

脱离文档流，也就是将元素从普通的布局排版中拿走，其他盒子在定位的时候，会当做脱离文档流的元素不存在而进行定位

假如某个div元素A是浮动的，如果A元素上一个元素也是浮动的，那么A元素会跟随在上一个元素的后边(如果一行放不下这两个元素，那么A元素会被挤到下一行)；如果A元素上一个元素是标准流中的元素，那么A的相对垂直位置不会改变，也就是说A的顶部总是和上一个元素的底部对齐。此外，浮动的框之后的block元素元素会认为这个框不存在，但其中的文本依然会为这个元素让出位置。浮动的框之后的inline元素，会为这个框空出位置，然后按顺序排列。

示例代码：<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>Title</title>    <style>        *{            margin: 0;        }        .r1{            width: 300px;            height: 100px;            background-color: #7A77C8;            float: left;        }        .r2{            width: 200px;            height: 200px;            background-color: wheat;            /*float: left;*/        }        .r3{            width: 100px;            height: 200px;            background-color: darkgreen;            float: left;        }    </style></head><body><div class="r1"></div><div class="r2"></div><div class="r3"></div></body></html>

非完全脱离文档流
解决方法：要么都不使用浮动；要么都使用float浮动；要么对没有使用float浮动的DIV设置margin样式。

左右结构div盒子重叠现象，一般是由于相邻两个DIV一个使用浮动一个没有使用浮动。导致DIV
不是在同个“平面”上，但内容不会造成覆盖现象，只有DIV形成覆盖现象。

示例代码：  <!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>Title</title>    <style>        *{            margin: 0;        }        .r1{            width: 100px;            height: 100px;            background-color: #7A77C8;            float: left;        }        .r2{            width: 200px;            height: 200px;            background-color: wheat;        }    </style></head><body><div class="r1"></div><div class="r2">region2</div></body></html>

父级坍塌现象
解决方法：1、固定高度
2、清除浮动(推荐)。

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>Title</title><style type="text/css">         * {             margin:0;padding:0;         }        .container{            border:1px solid red;width:300px;        }        #box1{            background-color:green;float:left;width:100px;height:100px;        }        #box2{            background-color:deeppink; float:right;width:100px;height:100px;         }         #box3{             background-color:pink;height:40px;         }</style></head><body>        <div class="container">                <div id="box1">box1 向左浮动</div>                <div id="box2">box2 向右浮动</div>        </div>        <div id="box3">box3</div></body></body></html>例子如上：.container和box3的布局是上下结构，上图发现box3跑到了上面，与.container产生了重叠，但文本内容没有发生覆盖，只有div发生覆盖现象。这个原因是因为第一个大盒子里的子元素使用了浮动，脱离了文档流，导致.container没有被撑开。box3认为.container没有高度（未被撑开），因此跑上去了。

阅读全文

0 0