微信小程序本地存储与登录页面处理实例详细讲解
614
2022-11-18
HTML+ CSS 学习②
HTML+ CSS 学习②
1 CSS背景样式?2 CSS边框样式?3CSS文字样式?4 CSS段落样式?5 CSS复合样式:6 CSS选择器?7 CSS继承?8 CSS优先级?9 CSS盒子模型?10 标签分类?11 显示框类型?12 标签嵌套规范?13 溢出隐藏?14 透明度与手势?15 最大、最小宽高?16 CSS默认样式?
1 CSS背景样式?
background-color 背景色background-image 背景图url(背景地址)默认:会水平垂直都铺满背景图background-repeat 平铺方式 repeat-x x轴平铺 repeat-y y轴平铺 repeat ( x , y 都进行平铺,默认值 ) no-repeat 都不平铺background-position : 背景位置 x y : number(px、%) | 单词 x : left、center、right y : top、center、bottombackground-attachment : 背景图随滚动条移动的方式 scroll : 默认值 ( 背景位置是按照当前元素进行偏移的 ) fixed( 背景位置是按照浏览器进行偏移的 )
2 CSS边框样式?
border-style : 边框样式solid : 实线dashed : 虚线dotted : 点线border-width : 边框大小px…border-color : 边框颜色 red #f00 …
边框也可以针对某一天边进行单独设置 : border-left-style : 中间是方向 left、right、top、bottom
颜色:透明颜色 transparent
3CSS文字样式?
font-family : 字体类型 英文、中文 衬线体、非衬线体 注意点: 1.多个字体类型的设置目的 2.引号的添加的目的 font-size : 字体大小 默认 : 16px 写法 : number(px) | 单词 ( small large … 不推荐使用)
font-weight : 字体粗细 模式: 正常( normal ) 加粗 ( bold ) 写法:单词(normal、bold) | number ( 100 200 … 900 , 100到500都是正常的,600都900都是加粗的 )
font-style : 字体样式 模式: 正常 ( normal ) 斜体 ( italic ) 写法:单词 ( normal 、 italic ) 注:oblique也是表示斜体,用的比较少,一般了解即可。 区别:1.italic 带有倾斜属性的字体的才可以设置倾斜操作。 2.oblique 没有倾斜属性的字体也可以设置倾斜操作。
4 CSS段落样式?
text-decoration:文本装饰 下划线 : underline 删除线 :line-through 上划线 : overline 不添加任何装饰 : none 注:添加多个文本修饰:line-through underline overline
text-transform:文本大小写 ( 针对英文段落 ) 小写:lowercase 大写:uppercase 只针对首字母大写:capitalize
text-indent : 文本缩进 首行缩进 em单位:相对单位,1em永远都是跟字体大小相同
text-align : 文本对齐方式 对齐方式 : left 、right、center、justify(两端点对齐)
line-height : 定义行高
什么是行高,一行文字的高度,上边距和下边距的等价关系。默认行高:不是固定值,而是变化的。根据当前字体的大小再不断的变化。取值:1. number( px ) | scale ( 比例值 , 跟文字大小成比例的 )
letter-spacing : 字之间的间距 word-spacing : 词之间的间距 ( 针对英文段落的 )
英文和数字不自动折行的问题: 1. word-break : break-all; (非常强烈的折行) 2. word-wrap : break-word;(不是那么强烈的折行 ,会产生一些空白区域)
5 CSS复合样式:
复合的写法,是通过空格的方式实现的。复合写法有的是不需要关心顺序,例如background、border;有的是需要关心顺序,例如font。
background : red url() repeat 0 0;border : 1px red solid;font :注:最少要有两个值 size familyweight style size family √style weight size family √weight style size/line-height family √注:如果非要混合去写的话,那么要先写复合样式,再写单一样式,这样样式才不会被覆盖掉。
6 CSS选择器?
ID选择器 #elem{} id=“elem” 注:
ID是唯一值,在一个页面中只能出现一次,出现多次是不符合规范的。命名的规范,由字母、下划线、中划线、字母(并且第一个不能是数字)驼峰写法 : searchButton (小驼峰) SearchButton (大驼峰) searchSmallButton短线写法:search-small-button下划线写法:search_small_button
CLASS选择器 .elem{} class=“elem” 注:
class选择器是可以复用的。可以添加多个class样式。多个样式的时候,样式的优先级根据CSS决定,而不是class属性中的顺序。标签+类的写法
标签选择器(TAG选择器) div{} 使用的场景:1. 去掉某些标签的默认样式时2. 复杂的选择器中,如 层次选择器群组选择器(分组选择器) 可以通过逗号的方式,给多个不同的选择器添加统一的CSS样式,来达到代码的复用。通配选择器*{ } -> div,ul,li,p,h1,h2…{} 注:尽量避免使用通配选择器,因为会给所有的标签添加样式,慎用。 使用的场景: 1. 去掉所有标签的默认样式时层次选择器后代 M N { } 父子 M > N { } 兄弟 M ~ N { } 当前M下面的所有兄弟N标签 相邻 M + N { } 当前M下面相邻的N标签属性选择器M[attr] {} = : 完全匹配 *= : 部分匹配 ^= : 起始匹配 $= : 结束匹配 [][][] : 组合匹配伪类选择器 M:伪类{} :link 访问前的样式 ( 只能添加给a标签 ) :visited 访问后的样式 ( 只能添加给a标签 ) :hover 鼠标移入时的样式 (可以添加给所有的标签) :active 鼠标按下时的样式 (可以添加给所有的标签)注: 一般的网站都只设置 a{} ( link visited active ) a:hover{}:after、:before 通过伪类的方式给元素添加一段文本内容,使用content属性 :checked、:disabled 、:focus 都是针对表单元素的结构性伪类选择器 nth-of-type() nth-child() 角标是从1开始的,1表示第一项,2表示第二项 | n值 表示从0到无穷大 first-of-type last-of-type only-of-type
nth-of-type()和nth-child()之间的区别 type : 类型 child : 孩子
7 CSS继承?
文字相关的样式可以被继承 布局相关的样式不能被继承 ( 默认是不能继承的,但是可以设置继承属性 inherit 值 )
8 CSS优先级?
相同样式优先级 当设置相同样式时,后面的优先级较高,但不建议出现重复设置样式的情况。内部样式与外部样式 内部样式与外部样式优先级相同,如果都设置了相同样式,那么后写的引入方式优先级高。单一样式优先级 style行间 > id > class > tag > * > 继承注:style行间 权重 1000 id 权重 100 class 权重 10 tag 权重 1!important 提升样式优先级,非规范方式,不建议使用。( 不能针对继承的属性进行优先级的提升 )标签+类与单类 标签+类 > 单类群组优先级 群组选择器与单一选择器的优先级相同,靠后写的优先级高。层次优先级
权重比较 ul li .box p input{} 1 + 1 + 10 + 1 + 1 .hello span #elem{} 10 + 1 + 100约分比较 ul li .box p input{} li p input{} .hello span #elem{} #elem{}
9 CSS盒子模型?
组成 : content -> padding -> border -> margin 物品 填充物 包装盒 盒子与盒子之间的间距
content : 内容区域 width和height组成的 padding : 内边距(内填充) 只写一个值: 30px (上下左右) 写两个值 : 30px 40px ( 上下、左右 ) 写四个值 : 30px 40px 50px 60px(上、右、下、左) 单一样式只能写一个值: padding-left padding-right padding-top padding-bottom margin : 外边距(外填充) 只写一个值: 30px (上下左右) 写两个值 : 30px 40px ( 上下、左右 ) 写四个值 : 30px 40px 50px 60px(上、右、下、左) 单一样式只能写一个值: margin-left margin-right margin-top margin-bottom 注: 1. 背景色填充到margin以内的区域 (不包括margin区域) 2. 文字在content区域添加。 3. padding不能为负数,而margin可以为负数。
box-sizing: 盒尺寸,可以改变盒子模型的展示形态。 默认值: content-box : width、height -> content border-box : width、height -> content padding border
使用的场景: 1. 不用再去计算一些值 2. 解决一些100%的问题
盒子模型的一些问题: 1. margin叠加问题,出现在上下margin同时存在的时候。会取上下中值较大的作为叠加的值。 2. margin传递问题,出现在嵌套的结构中,只是针对margin-top的问题。
扩展: 1. margin左右自适应是可以的 ,但是上下自适应是不行的。( 如果想实现上下自适应的话,需要在第二大部分来进行学习 ) 2. width、height不设置的时候,对盒子模型的影响,会自动去计算容器的大小,节省代码。
10 标签分类?
按类型 block : div、p、ul、li、h1 … 1. 独占一行 2. 支持所有样式 3. 不写宽的时候,跟父元素的宽相同 4. 所占区域是一个矩形
inline : span 、a、em、strong、img ... 1. 挨在一起的 2. 有些样式不支持,例如:width、height、margin、padding 3. 不写宽的时候,宽度由内容决定 4. 所占的区域不一定是矩形 5. 内联标签之间会有空隙,原因:换行产生的inline-block : input、select ... 1. 挨在一起,但是支持宽高注:布局一般用块标签,修饰文本一般用内联标签
按内容 Flow:流内容 Metadata:元数据 Sectioning:分区 Heading:标题 Phrasing:措辞 Embedded:嵌入的 Interactive:互动的 (详情:替换元素 :浏览器根据元素的标签和属性,来决定元素的具体显示内容。 img、input … 非替换元素 : 将内容直接告诉浏览器,将其显示出来。 div、h1、p …
11 显示框类型?
display: block inline inline-block none …
区别: display:none 不占空间的隐藏 visibility: hidden 占空间的隐藏
12 标签嵌套规范?
ul、lidl、dt、ddtable、tr、td块能够嵌套内联
块嵌套块内联是不能嵌套块 错误的写法: 特殊: 正确的写法:
13 溢出隐藏?
overflow :visible : 默认 hiddenscroll auto x轴、y轴 overflow-x、overflow-y针对两个轴分别设置
14 透明度与手势?
opacity : 0(透明) ~ 1(不透明) 0.5(半透明)
注:占空间、所有的子内容也会透明
rgba() : 0 ~ 1
注:可以让指定的样式透明,而不影响其他样式
cursor : 手势 default : 默认箭头 要实现自定义手势: 准备图片: .cur 、 .ico cursor : url(./img/cursor.ico),auto;
15 最大、最小宽高?
min-width、min-heightmax-width、max-height
%单位:换算 -> 已父容器的大小进行换算的
一个容器怎么适应屏幕的高 : 容器加height:100%; body:100%; html:100%;
html,body{ height:100%;}.contrainer{ height:100%;}
16 CSS默认样式?
没有默认样式的: div、span
有默认样式的:
body -> marign : 8pxh1 -> margin : 上下 21.440px font-weight : boldp -> margin : 上下 16pxul -> margin : 上下 16px padding : 左 40px 默认点:list-style : disca -> text-decoration: underline;
css reset : *{ margin:0; padding:0;}优点:不用考虑哪些标签有默认的margin和padding缺点:稍微的影响性能 body,p,h1,ul{ margin:0; padding:0;}
ul{ list-style : none;}
a{ text-decoration: none; color:#999;}
img{ dispaly:block} 问题的现象:图片跟容器底部有一些空隙。 内联元素的对齐方式是按照文字基线对齐的,而不是文字底线对齐的。 vertical-align: baseline; 基线对齐方式,默认值 img{ vertical-align:bottom;} 解决方式是推荐的
写具体页面的时候或一个布局效果的时候:
1 写结构2 css重置样式3 写具体样式
版权声明:本文内容由网络用户投稿,版权归原作者所有,本站不拥有其著作权,亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容,请联系我们jiasou666@gmail.com 处理,核实后本网站将在24小时内删除侵权内容。
发表评论
暂时没有评论,来抢沙发吧~