A我今天学习到了什么
1温习day03的知识点
1.1css背景
//背景颜色
background-color
//背景图片
backgorund-image
//背景重复
background-repeat
//背景吸附
background-attachment:fixed | scroll
//背景位置有两个参数,第一个参数表示离x轴的距离,y表示离y轴的距离
背景位置:background-position: x y
//简写
background: color image repeat position
//背景图片大小
background-size
//x表示宽度,y表示高度
background-size: x y;
//此时会保持图像的纵横比并将图像缩放成将完全覆盖背景定位区域的最小大小。
//相当于background-size:100% 100%;
background-size:cover;
1.2.css文本
color:设置字体的颜色
//颜色是通过CSS最经常的指定：颜色的名称 - 如: red
body {color:red;}
//十六进制值 - 如: ＃FF0000
h1 {color:#00ff00;}
//一个RGB值 - 如: RGB(255,0,0)
h2 {color:rgb(255,0,0);}
text-align
//文本对齐方式
text-align: right|left|center
//左|右|中心
text-decoration
//文本修饰
text-decoration: underline|overline|line-through
//下划线|上划线|删除线
text-indent
//文本缩进
text-transform
//文本转换(了解)
text-transform:uppercase|lowercase|capitalize
//大写|小写|首大写
1.3.css字体
p{font-family:Helvetica,Microsoft YaHei}
//font-family 属性应该设置几个字体名称作为一种"后备"机制，
如果浏览器不支持第一种字体，他将尝试下一种字体
font-size
//字体大小
font-style:normal | italic
//字体样式：正常|斜体
font-weight:normal | bold | lighter
//字体粗细：正常|粗体|轻淡
行高:line-height
1.4.css链接
这四个链接状态是：
a:link - 正常，未访问过的链接
a:visited - 用户已访问过的链接
a:hover - 当用户鼠标放在链接上时
a:active - 链接被点击的那一刻
*若单独设置几个链接，必须遵守如下规则：
a:hover 必须跟在 a:link 和 a:visited后面
a:active 必须跟在 a:hover后面
1.5.css列表样式(针对ul)
list-style:none;
//无样式
list-style-type:circle|square
//目录样式类型：圆|平方
list-style-image:url("xxx")
//图片
1.6.边框
border-width
// 边框的宽度
border-style
// 边框的样式
border-color
//边框的颜色
border： width style color
p{border:1px solid #333}
//可以简写成
p{ border-top:1px solid #ccc;}
*边框-单独设置各边
1.7.表格(了解)
border-collapse
//属性设置表格的边框被折叠成一个单一的边框
table{border-collapse:collapse}
//可以在td,th设置这个两个属性
colspan:value //跨越的列
rowspan:value //跨越的行
1.8.轮廓属性（不怎么用）
p{outline:1px solid pink}
轮廓（outline）是绘制于元素周围的一条线，位于边框边缘的外围，可起到突出元素的作用
1.9.透明
透明：opacity：0~1
visibility:hidden|visible//可见|能见度：隐藏
3css样式的继承:子元素对父元素的继承
1.1.width和height
width如果子元素不设置宽度，默认情况下继承父元素的宽度
height如果父元素不设置高度，默认情况下父元素继承子元素的高度
1.2.css可以继承的属性
文本相关属性:
color,text-align,text-decoration,text-transform,text-indent
//颜色，文本对齐，文本装饰，文本转换，文本缩进(内联标签不能设置此属性)
字体相关属性:font-family,font-style,font-size,font-weight,line-height
//字体，字体样式，字体大小，字体粗细，线高度
列表相关属性:list-style//样式
表格相关属性:border-collapse//折叠
其他属性:cursor,visibility//光标样式，能见度
2拓展day04的知识点
2.1.盒子模型
盒子模型:box-sizing:border-box
当设置box-sizing:border-box;
设置padding,和border,//它的宽度还是会保持不变
box-sizing:content-box;(默认清晰)
//当设置padding和border时宽度会发生改变
//总宽度=width+border+padding
2.2.浮动float
1.目的:为了让元素并排显示
float：lest|right；
（postion:relative// 相对的位置移动
top|left|right|bottom：1px；）
2如何清除浮动
(1)给下面的兄弟元素给clear:both;
(2)给父级加overflow:hidden;
(3)用伪元素,给父级内容生成
.row:before{
display:table;
content:“”}//前面加
.row:after{
display:table;
content:“”
clear:both;}//后面加
2.3.定位:position
position:absolute | relative
//绝对定位，相对定位
Relative 定位
相对定位元素的定位是相对其正常位置。
postion:relative//父级专属位置设定
Absolute定位 （fixed固定//没有父级只有<html>）
绝对定位的元素的位置相对于最近的相对定位的父元素，
如果没有已定位的父元素，那么它的位置相对于<html>
****定位的调试都通过left,top,right,bottom移动
z-index:设置元素的堆叠顺序 给position:absolute绝对定位的元素
当子元素没有设置宽度，如果设置了绝对定位,它不会继承父元素的宽度
2.4.布局方式的总结
1.默认布局
2.浮动布局(左右安置)
3.层级布局(定位)
2.5.实现元素的垂直水平居中
（相对）父元素设置parent{position:relative;}
(绝对）子元素设置child{
position:absolute;left:50%;top:50%;
margin-left:-50%*child*width;
margin-top:-50%*child*height;}
2.6:CSS样式的几种引入方式
外部样式表
<link rel="stylesheet" type="text/css" href="/c5.css">
内部样式表（位于 <head> 标签内部）
<style>
p{color:pink;font-size:16px}
</style>
内联样式（在 HTML 元素内部）
<p style=”color:pink;font-size:16px”>hello world</p>
//给同一选择器设置同一样式,离元素近的样式设置方式优先级高
B我掌握了的
2.1.盒子模型
盒子模型:box-sizing:border-box
当设置box-sizing:border-box;
设置padding,和border,//它的宽度还是会保持不变
box-sizing:content-box;(默认清晰)
//当设置padding和border时宽度会发生改变
//总宽度=width+border+padding
2.2.浮动float
1.目的:为了让元素并排显示
float：lest|right；
（postion:relative// 相对的位置移动
top|left|right|bottom：1px；）
2如何清除浮动
(1)给下面的兄弟元素给clear:both;
(2)给父级加overflow:hidden;
(3)用伪元素,给父级内容生成
.row:before{
display:table;
content:“”}//前面加
.row:after{
display:table;
content:“”
clear:both;}//后面加
2.3.定位:position
position:absolute | relative
//绝对定位，相对定位
Relative 定位
相对定位元素的定位是相对其正常位置。
postion:relative//父级专属位置设定
Absolute定位 （fixed固定//没有父级只有<html>）
绝对定位的元素的位置相对于最近的相对定位的父元素，
如果没有已定位的父元素，那么它的位置相对于<html>
****定位的调试都通过left,top,right,bottom移动
z-index:设置元素的堆叠顺序 给position:absolute绝对定位的元素
当子元素没有设置宽度，如果设置了绝对定位,它不会继承父元素的宽度
2.4.布局方式的总结
1.默认布局
2.浮动布局(左右安置)
3.层级布局(定位)
2.5.实现元素的垂直水平居中
（相对）父元素设置parent{position:relative;}
(绝对）子元素设置child{
position:absolute;left:50%;top:50%;
margin-left:-50%*child*width;
margin-top:-50%*child*height;}
2.6:CSS样式的几种引入方式
外部样式表
<link rel="stylesheet" type="text/css" href="/c5.css">
内部样式表（位于 <head> 标签内部）
<style>
p{color:pink;font-size:16px}
</style>
内联样式（在 HTML 元素内部）
<p style=”color:pink;font-size:16px”>hello world</p>
//给同一选择器设置同一样式,离元素近的样式设置方式优先级高
C我没有掌握的
全部掌握了，只是不太熟练，要多练习~~~
01.PNG
02.PNG
03.PNG
网友评论