CSS入门之渡一教育笔记二

作者: 渺渺兮余木 | 来源:发表于2019-07-14 07:49 被阅读0次

字体

font-size :字体大小; 浏览器默认为16px，但做网页开发一般用12px；字体大小设置的是字体的高；宽按比例调整
font-weight:字体加粗;默认值为normal；值：lighter(细) normal(正常) bold(加粗) bolder(更粗，能否实现取决于所使用的字体包中是否有‘bolder’这种样式) ；还可用数字表示：100 200 300 ~ 900（细 -> 粗）
font-style :字体样式值：italic(斜体)
font-family: 苹果公司字体arial
color:透明色 transparent

三种设置字体颜色的方法

1.纯英文单词--------------例：color : blue;(颜色不标准，开发时不可用)
2.颜色代码----------------例：color : #ff4400;光学三原色：红red绿green蓝blue【rgb】
3.颜色函数----------------例：color : rgb(255,255,255)

div

border：边框 border : 100px solid black;每个边也可单独设置，例：border-left : 10px solid green;border-right-color : yellow;
text-align: 文本对齐方式 left：左对齐
line-height：单行文本行高
单位：em ；1em = 1 font-size
划线

从中间划横线 : text-decoration:line-through;
下划线 : text-decoration: underline;
上划线 : text-decoration: overline;
去除横线: text-decoration: none;
6.cursor:光标在容器中的样式

文字在容器中水平垂直居中，实现方法：

单行文本居中

.firstDiv{
    /*  单行文本居中     行高等于容器高度*/
    background-color: red;
    color: #fff;
    /*  垂直居中*/
    height: 300px;
    line-height: 300px;
}

多行文本居中

8.当鼠标在容器上，使容器样式发生改变

/*伪类选择器*/
div:hover{
    background-color: orange;
}

9.行级元素、块级元素及行级块元素由：display控制

行级元素(inline)：内容决定元素所占位置，不可通过css改变宽高，有文字特性（被分隔）；span、strong、em、a、del等
块级元素(block)：独占一行，可以通过css改变宽高；div、p、ul、li、ol、form、address
行级块元素(inline-block): 内容决定大小，可以该宽高 img
以上各标签display都可以更改
10.img：如果只设置宽或者高，则相对应的高或者宽会等比例显示
解决多个img中间有空隙问题

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>myFirstHTML</title>
<!--关联外部样式表-->
<link href="one.css" rel="stylesheet" type="text/css">
</head>
    
<body> 
    <img src="../../../Pictures/笔记簿.png">
    <img src="../../../Pictures/笔记簿.png">
    <img src="../../../Pictures/笔记簿.png">
    <img src="../../../Pictures/笔记簿.png">
</body>
</html>

运行结果

解决方法一：

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>myFirstHTML</title>
<!--关联外部样式表-->
<link href="one.css" rel="stylesheet" type="text/css">
</head>
    
<body> 
    <img src="../../../Pictures/笔记簿.png"><img src="../../../Pictures/笔记簿.png"><img src="../../../Pictures/笔记簿.png"><img src="../../../Pictures/笔记簿.png">
</body>
</html>

10.层模型

position:absolute;脱离原来位置进行定位 ,z-index:0;确定该元素在第几层，大的优先显示
position:relative;保留原来位置进行定位,相对于自己原来位置进行定位
position:fixed;
11.块元素在整个浏览器页面居中

.box1{
    position: fixed;
    left: 50%;
    top: 50%;
    width: 100px;
    height: 100px;
    margin-left: -50px;
    margin-top: -50px;
    background-color: #FF0014;
}

12.作圆

.box1{
    width: 100px;
    height: 100px;
    border: 10px solid black;
    /*设置圆角  */
    border-radius: 50%;
}

13.两栏布局

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>myFirstHTML</title>
<!--关联外部样式表-->
<link href="one.css" rel="stylesheet" type="text/css">
</head>
    
<body> 
    <div class="box1"></div>
    <div class="box2"></div>
</body>
</html>

*{
    margin: 0;
    padding: 0;
}
.box1{
    position: absolute;
    right: 0;
    width: 100px;
    height: 100px;
    background-color: #fcc;
    opacity: 0.5;
}
.box2{
    margin-right: 100px;
    height: 100px;
    background-color: black;
}

14.两个bug

第一个----margin塌陷
当一个大盒子嵌套一个小盒子，大盒子top之后，小盒子再top，则小盒子的top不起作用

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>myFirstHTML</title>
<!--关联外部样式表-->
<link href="one.css" rel="stylesheet" type="text/css">
</head>
    
<body> 
    
<!--    大盒子box1嵌套小盒子box2-->
    <div class="box1">
        <div class="box2"></div>
    </div>
</body>
</html>

*{
    margin: 0;
    padding: 0;
}
.box1{
    margin-top: 100px;
    margin-left: 100px;
    width: 100px;
    height: 100px;
    background-color: #fcc;
}
.box2{
    width: 50px;
    height: 50px;
    background-color: black;
/*  margin-top:50px,没有变化*/
    margin-top: 50px;
/*  margin-left:50px,正常*/
    margin-left: 50px;
}

正规解决方法----触发bfc解决

*{
    margin: 0;
    padding: 0;
}
.box1{
    margin-top: 100px;
    margin-left: 100px;
    width: 100px;
    height: 100px;
    background-color: #fcc;
}
.box2{
/*  position: absolute;可触发bfc*/
    position: absolute;
    width: 50px;
    height: 50px;
    background-color: black;
/*  margin-top:50px,没有变化*/
    margin-top: 50px;
/*  margin-left:50px,正常*/
    margin-left: 50px;
    
}
/*触发bfc有{
    overflow: hidden;
    display: inline-block;
    position: absolute;
}*/

第二个问题----margin合并-----该bug不做解决，直接改变margin-bottom值

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>myFirstHTML</title>
<!--关联外部样式表-->
<link href="one.css" rel="stylesheet" type="text/css">
</head>
    
<body> 
    
<!--    大盒子box1嵌套小盒子box2-->
    <span class="box1">123</span>
    <span class="box2">456</span>
    <div class="demo1">1</div>
    <div class="demo2">2</div>
</body>
</html>

*{
    margin: 0;
    padding: 0;
}

.box1{
    margin-left: 100px;
    background-color: blue;
}

.box2{
    margin-left: 100px;
    background-color: red;
}

.demo1{
    background-color: red;
    margin-bottom: 200px;
}

.demo2{
    background-color: green;
/*  BUG: margin-top: 100px;与demo1的marg-bottom重合*/
    margin-top: 100px;
}

解决方法

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>myFirstHTML</title>
<!--关联外部样式表-->
<link href="one.css" rel="stylesheet" type="text/css">
</head>
    
<body> 
    
<!--    大盒子box1嵌套小盒子box2-->
    <span class="box1">123</span>
    <span class="box2">456</span>
<!--解决方法 一
    <div class="demo1">1</div>
    <div class="wrapper">
        <div class="demo2">2</div>
    </div>
-->
<!--    解决方法二
    <div class="wrapper">
        <div class="demo1">1</div>
        <div class="demo2">2</div>
    </div>
-->
</body>
</html>

*{
    margin: 0;
    padding: 0;
}

.box1{
    margin-left: 100px;
    background-color: blue;
}

.box2{
    margin-left: 100px;
    background-color: red;
}

.demo1{
    background-color: red;
    margin-bottom: 200px;
}

.demo2{
    background-color: green;
/*  margin-top: 100px;与demo1的marg-bottom重合*/
    margin-top: 100px;
}
/*使用bfc*/
.wrapper{
    overflow: hidden;
}

15.浮动流

浮动元素产生浮动流
所有产生浮动流的元素，块级元素排版时无视这类元素
但产生bfc的元素和文本类属性元素以及文本在排版时不能无视浮动元素
清除浮动流方法
在浮动元素后添加一个p标签，该p标签样式 p{border-top: 0 solid black;clear: both;}
clear专门用于清除浮动流，用处：当在块级元素中出现浮动元素时，由于浮动流的原因使块级元素无法自适应高度，则使用clear可消除浮动流，使块级元素可出现高度的自适应

<body> 
    <!--伪元素-->
    <div class="wrapper">
        <div class="content">1</div>
        <div class="content">2</div>
        <div class="content">3</div>
        <div class="content">4</div>
        <div class="content">5</div>
        <div class="content">6</div>
    </div>
</body>

*{
    margin: 0;
    padding: 0;
}


.wrapper{
    border: 1px solid black;
}
.content{
/*      浮动*/
    float: left;
    width: 100px;
    height: 100px;
    color: #fff;
    background-color: black;
}

图片.png

解决方法

*{
    margin: 0;
    padding: 0;
}


.wrapper{
    border: 1px solid black;
}
.wrapper::after{
    /*  此处必须要写*/
    content: "";
    clear: both;
    /*  该元素必须是块级元素，clear才会生效*/
    display: block;
}
.content{
/*      浮动*/
    float: left;
    width: 100px;
    height: 100px;
    color: #fff;
    background-color: black;
}

图片.png

其他方法----直接更改wrapper样式

.wrapper{
/*
    任意一个都可以解决
    float: left;
    display: inline-block;
    position: absolute;
*/
    border: 1px solid black;
}

若想让文字环绕图片，则对图片添加浮动属性即可；
如果在样式中直接添加position: absolute;或者float: left/right;，则还会是该标签改为行级块元素display: inline-block;

16.伪元素

每一个标签都带有伪元素
‘::’的作用是选出伪元素

<body> 
    <!--伪元素-->
    <span>,world,</span>
</body>

span::before{
    /*  对其内容修改*/
    content: "hallo";
    /*  也可以进行样式修改*/
    background-color: red;
}

伪元素

17.导航栏制作

居中，两边宽度随页面大小自适应

<body> 
<!--    模拟淘宝网两边留白-->
    <div class="wrapper">
        <div class="content"></div>
    </div>
</body>

*{
    margin: 0;
    padding: 0;
}

.wrapper{
    height: 100px;
    background-color: black;
}

.content{
    /*  auto:自适应*/
    margin: 0 auto;
    height: 100px;
    width: 1000px;
    background-color: aqua;
}

图片.png

18.文本元素对齐线

vertical-align: -1px;
19.题目要求

题

解决代码

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>myFirstHTML</title>
<!--关联外部样式表-->
<link href="one.css" rel="stylesheet" type="text/css">
</head>
    
<body> 
    <div class="wrapper">
        <img src="first.jpg"  class="img">
        <p class="content1">{最多两行20px，#333，顶部对齐图片，底部间距8px}</p>
        <p class="content2">{12px #666 行高1.2}使用语义化的html标签以下布局，考虑模块化和扩展性。容器默认宽高320px，右侧。</p>
    </div>
</body>
</html>

*{
    margin: 0;
    padding: 0;
}

.wrapper{
    width: 320px;
    border: 2px solid black;
}

.wrapper .img{
    width: 100px;
    height: 100px;
    float: left;
}
.content1{
    font-size: 20px;
    line-height: 20px;
    height: 40px;
    overflow: hidden;
    color: #333;
    margin-bottom: 8px;
}
.content2{
    font-size: 12px;
    color: #666;
    line-height: 1.2em;
}

CSS入门之渡一教育笔记二

字体

三种设置字体颜色的方法

div

相关文章

网友评论

延伸阅读

深度阅读

栏目导航

热点阅读