CSS--day02
目录
一、文本属性
二、列表属性
三、背景属性
四、浮动属性
一、文本属性
| 个数 | 属性 | 描述 | 说明 |
| 1 | font-size | 字体大小 | 单位是px，浏览器默认是16px，设计图常用字号是12px |
| 2 | font-family | 字体 |
当字体是中文字体、英文字体中有空格时，需加双引号； 多个字体中间用逗号链接，先解析第一个字体，如果没有解析第二个字体，以此类推 |
| 3 | color | 颜色 | color:red; color:#ff0; color:rgb(255,0,0) 0-255 |
| 4 | font-weight | 加粗 |
font-weight:bolder(更粗的)/bold(加粗)/normal(常规) font-weight:100-900; 100-500不加粗 600-900加粗 |
| 5 | font-style | 倾斜 | font-style:italic(斜体字)/oblique(倾斜的文字)/normal(常规显示); |
| 6 | text-align | 文本水平对齐 |
text-align:left;水平靠左 text-align:right;水平靠右 text-align:center;水平居中 text-align:justify;水平2端对齐,但是只对多行起作用 |
| 7 | line-height | 行高 | line-height的数据 = height的数据，可以实现单行文本垂直居中 |
| 8 | text-indent | 首行缩进 | text-indent可以取负值；text-indent属性只对第一行起作用 |
| 9 | letter-spacing | 字间距 | 控制文字和文字之间的间距 |
| 10 | text-decoration | 文本修饰 | text-decoration没有/underline下划线/overline上划线/line-through删除线 |
| 11 | font | 文字简写 |
font是font-style font-weight font-size / line-height font-family 的简写。 |
①文字大小
浏览器大小默认是:16px
②文字字体
可以设置多个值,用逗号隔开.
③文字颜色
三种表示方式:
④文字加粗和倾斜
⑤文本水平对齐
⑥文本间距和首行缩进
文本间距：词间距，字符间距
首行缩进：2em当前字体的2倍
⑦文本的修饰
修饰：下划线、上划线、中划线、无
注意：如果想要上中下所有的划线，需空格隔开。单独写会被下一个所覆盖
⑧检索大小写和font
font是font-style font-weight font-size / line-height font-family 的简写（顺序不能改变）
二、列表属性
| 个数 | 属性 | 描述 | 说明 |
| 1 | list-style-type | 定义列表符合样式 | list-style-type;disc（实心圆）/circle（空心圆）/square（实心方块）/none（去掉符号） |
| 2 | list-style-image | 将图片设置为列表符合样式 | list-style-image:url(); |
| 3 | list-style-position | 设置列表项标记的放置位置 |
list-style-position:outside;列表的外面默认值 list-style-position:inside;列表的里面 |
| 4 | list-style | 简写 | list-style:none;去掉列表符号 |
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>ul{/*disc（实心圆）/circle（空心圆）/square（实心方块）/none（去掉符号） */list-style-type: disc;}li{border: 1px solid red;list-style-position: inside;}.li1{list-style-image: url(3.png);}.li2{list-style-image: url(3.png);}.li3{list-style-image: url(3.png);}.box1{/* 复合属性 */list-style: none url(3.png) inside;}</style>
</head>
<body><ul><li class = "li1">111111</li><li class = "li2">222222</li><li class = "li3">333333</li></ul><ul class = "box1"><li>444</li><li>555</li><li>666</li></ul>
</body>
</html>
三、背景属性
| 个数 | 属性 | 描述 | 说明 |
| 1 | background-color | 背景颜色 |
background-color:red; |
| 2 | background-image | 背景图片 |
background-image:ulr(); |
| 3 | background-repeat | 背景图片的平铺 | background-repeat;no-repeat/repeat/repeat-x/repeat-y |
| 4 | background-position | 背景图片的定位 |
background-position:水平位置垂直位置;可以给负值 |
| 5 | background-attachment | 背景图片的固定 |
background-attachment : scroll (滚动)/ fixed(固定，固定在浏览器窗口里面，固定之后就相对于浏览器窗口了); |
| 可以简写成background | |||
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>.box1{width: 300px;height: 300px;/* background-color:blueviolet; *//* rgba最后一个代表透明度 */background-color: rgba(255,0,0,0.5);/* 图片默认平铺 */background-image: url(1.webp);/* 背景图片的平铺repeat:默认平铺repeat-x:x轴平铺repeat-y:y轴平铺no-repeat:不平铺*/background-repeat: repeat-x;/* 背景图片的位置1.20px 20px2.10% 10%3.left center righttop center bottom*//* background-position: -20px,-20px; */background-position: center center;/* 背景图片的大小 1.300px 300px 2.100% 100%3.cover:把背景图像扩展至足够答，以使背景图像完全覆盖背景区域。也许无法显示在背景定位区域中4.contain：把图像扩展至最大尺寸，以使其宽度和高度完全适应内容区域。铺不满盒子，留白*/background-size:100% 100%;/* 背景的固定和滚动fixed:相对于窗口固定(会产生视差)*/background-attachment: fixed;margin:0 auto;}.box2{width: 100px;height: 100px;background-color: rgba(0,0,0,0.5);}/* 复合写法：1.用空格隔开2.顺序可以换3.可以只取一个值，放在后面能覆盖前面的值background-size不能复合，单独使用。*/.box3{width: 300px;height: 300px;/* background-color: yellow;background-image: url(1.jpg);background-repeat: no-repeat;background-position: center; */background: yellow url(1.jpg) no-repeat center fixed;}</style>
</head>
<body><div class="box1" ><div class="box2"></div></div><div class="box3"></div>
</body>
</html>四、浮动属性
| 个数 | 属性 | 描述 | 说明 |
| 1 | float | float: left | 元素靠左边浮动 |
| 2 | float | float: right | 元素靠右边浮动 |
| 3 | float | float: none | 元素不浮动 |
| 浮动的作用1：定义网页中其他文本如何环绕该元素显示 | |||
| 浮动的作用2：就是让竖着的东西横着来 | |||
div标签独占一行，使用浮动可以实现div的排序，将其排成一行。
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>浮动属性</title><style>div{width: 100px;height:100px;}.red{background-color: red;float:left;}.green{/* width: 200px;height: 200px; */background-color: green;float:left;}.blue{background-color: blue;float:left;}</style>
</head>
<body><div class="red"></div><div class="green"></div><div class="blue"></div>
</body>
</html>
| 个数 | 属性 | 描述 | 说明 |
| 1 | clear | Clear：none | 允许有浮动对象 |
| 2 | clear | Clear：right | 不允许右边有浮动对象 |
| 3 | clear | Clear：left | 不允许左边有浮动对象 |
| 4 | clear | Clear：both | 不允许有浮动对象 |
| 清除浮动只是改变元素的排列方式，该元素还是漂浮者，不占据文档位置。 | |||
将div标签排列成两个在一行，第三个div在下面
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>.box1,.box2{width: 200px;height:200px;float:left;}.box1{background-color: yellow;}.box2{background-color: blue;}.box{width:300px;height:300px;background-color: red;/* clear:left; */}/* 1.写固定高度2.清浮动 clear用法3.当前浮动元素后面补一个盒子，不设置宽高，加行内样式clear:both4.overflow:hidden 让浮动元素计算高度*/.container{/* height:200px; */overflow:hidden;/* bfc 让浮动元素激素那高度 */}</style>
</head>
<body><div class="container"><div class="box1"></div><div class="box2"></div><!-- <div style="clear:left;"></div> --></div><div class="box"></div>
</body>
</html>
五、盒子模型
盒模型
盒模型是css布局的基石，它规定了网页元素如何显示以及元素间相互关系。css定义所有的元素都可以拥有像盒子一样的外形和平面空间，即都包含边框、边界、补白、内容区，这就是盒模型。
- 标准盒子模型
①内边距 --padding属性
②外边距--margin属性
1.margin-方向，四个方向
2.背景颜色没有蔓延
3.*{margin: 0}
4.外边距支持负值
5.屏幕居中？margin:0 auto;
特性：
1.兄弟关系，两个盒子垂直外边距与水平外边距问题
-----垂直方向上外边距取最大值
-----水平方向上外边距会进行合并处理
2.父子关系，给子加外边距，但作用于父身上了，怎么解决？
-----子margin-top====》父的padding-top，注意高度计算
-----给父盒子设置边框
-----给子盒子或者父盒子加浮动
-----overflor:hidden.BFC
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>.box1,.box2,.box3,.box4{width: 200px;height: 200px;}.box1{background-color: red;margin-bottom: 100px;}.box2{margin-top:50px;background-color: yellow;}.box3{float:left;background-color: blue;margin-right: 100px;}.box4{float:left;background-color: green;margin-left: 50px;}/* 解决方案1. 子margin-top====>父的padding-top，注意高度计算2. 给父盒子设置边框3. 给子盒子或者父盒子加浮动4. overflor:hidden.BFC*/.box5{width:498px;height: 498px;background-color: yellow;overflow: hidden;/* padding-top:100px; *//* transparent 透明 *//* border:1px solid green; */}.box6{width: 200px;height: 200px;background-color: red;margin-top:100px;}</style>
</head>
<body><div class="box1"></div><div class="box2"></div><div class="box3"></div><div class="box4"></div><div calss="box5"><div class="box6"></div></div>
</body>
</html>CSS--day02相关推荐
- CSS Day02学习
目录 1美化网页元素 span标签 字体样式 文本样式 1.颜色 2.文本对齐方式 3首行缩进 4.行高 (单行文字上下居中 :line-height=height) 5.装饰 6.文本图 ...
- HTML Table标签 Div属性 a标签
<!DOCTYPE HTML> 声明:表示这是一个html文件,满足html5规范,这句话必须写到第一行 1.注释:在代码旁进行说明 语法:<!-- --> 2.网页:浏览网络 ...
- Day02 - CSS
Day02 - CSS HTML的布局方式大致分为两种: 1) 表格标签 - table2) div + css 块级标签 典型的就是<div>< /div>,块级标签独占一行 ...
- 从零开始学前端：HTML的一些文本格式化标签、快捷键、和特殊符号 --- 今天你学习了吗？（CSS：Day02）
从零开始学前端:程序猿小白也可以完全掌握!- 今天你学习了吗?(CSS) 复习:从零开始学前端: HTML框架和VS Code安装 - 今天你学习了吗?(CSS:Day01) 文章目录 从零开始学前端 ...
- 前端 day02 CSS
目录 CSS 1.代码的三种引入方式 2.CSS选择器 3.常用样式 盒子模型 1.内边距 2.外边距 CSS 1.代码的三种引入方式 (1)内联样式 (2)内部样式 (3)外部样式 /*外部的css ...
- 【转型JAVA CSS 基础day02】
文章目录 一点感悟 一.CSS 学习资料 二.学习计划 三.学习感悟 第8章 CSS3选择器 第9章 CSS3的继承,优先级和重要性 第10章 CSS3的字体样式 设置字体状态 font-style: ...
- css入门学习day02笔记
各种选择器的详解 一.标签选择器 如下代码: <!DOCTYPE html> <html lang="en"> <head><meta c ...
- 《Day02》DIV+CSS样式，还不会排版优化自己网页？不是吧！不是吧！一看就会的东西
一.DIV+CSS简介 (一)DIV+CSS简介 1.DIV:DIV是层叠样式表中的'定位技术'',称DIVision,即为划分.有时可以称其为图层. DIV元素是用来为HTML(标准通用标记语言下的 ...
- HTML/CSS学习笔记03【CSS概述、CSS选择器、CSS属性、CSS案例-注册页面】
w3cschool菜鸟教程.CHM(腾讯微云):https://share.weiyun.com/c1FaX6ZD HTML/CSS学习笔记01[概念介绍.基本标签.表单标签][day01] HTML ...
- HTML/CSS学习笔记02【表单标签】
w3cschool菜鸟教程.CHM(腾讯微云):https://share.weiyun.com/c1FaX6ZD HTML/CSS学习笔记01[概念介绍.基本标签.表单标签][day01] HTML ...
最新文章
- linux 进程阻塞 语句,MPI进程拓扑及非阻塞通信程序示例
- https ddos攻击——由于有了认证和加解密 后果更严重 看绿盟的产品目前对于https的ddos cc攻击需要基于内容做检测...
- 【错误记录】Kotlin 编译报错 ( Smart cast to ‘Xxx‘ is impossible, because ‘xxx‘ is a mutable property ... )
- linux下vi的一些简单的操作
- _Linux结束进程到底有多少种方法？
- Codechef August Challenge 2018 : Coordinate Compression
- 【金蝶K3Cloud】 判断明细行的lambda表达式
- Notification通知
- [2019杭电多校第五场][hdu6628]permutation 1
- jquery 多个class操作
- webex无法用计算机呼叫,CiscoWebExMeetingsServer疑难解答指引.PDF
- apple tv 开发_如何在新的Apple TV上重新排列，配置和删除应用程序和游戏
- 输入任意一个字符串，判断这个字符串是否是回文，回文示例： 上海自来水来自海上
- PS平面设计如何学？零基础学习有多难？
- 使用PySide2创建图形化Python程序时：Available platform plugins are: direct2d, minimal, offscreen, windows
- php表格弄成隔两行变色,Excel表格实现隔行填充背景颜色的三种方法
- 实习一月记——美团点评云计算部
- 串联谐振耐压试验装置技术参数和特点，如何选择
- 读书笔记 | 《走出思维的误区》
- mysql中未找到URL_在此服务器上未找到请求的URL /读取