1.CSS基础知识
1.1 CSS的基本概念
CSS(Cascading Style Sheet) 层叠样式表,为了实现页面内容和表现形式的分离。层叠的含义是可以对一个元素多次设置样式,最后的结果是多次样式叠加的结果,如果有冲突,以后面的样式为准。
1.2 基本语法
标签:<p> <div>…之类的标签 使用方式:直接输入标签名
类(class):class名字 使用方式:输入点+class名
ID:ID名 使用方式:输入#+id名
一般来说我们写CSS文件的时候用的都是第二种方法,class名
这是因为ID名一般被用作JS的选择器
给class命名也是有规范的,像xxx-xxxx 这样做的好处是让你的代码更清晰
别人也更容易看懂
1.3使用方式
行内样式(内嵌样式):
直接写在标签里,使用style属性,只对当前标签有效,页面内容和表现形式是高度耦合的,不利于分工合作
内部样式(内联样式):
内部样式是在head部分使用<style>标签,样式对当前页面有效,内容和表现形式实现了一定程度的分离,但不彻底
外部样式(外联样式):
外部样式需要一个link标签来与html连接起来,内容与表现形式完全分离,而且任何需要用到改样式的页面都可以通过link标签连接的方式来实现
2.基础属性
2.1字体相关属性
font-size(字体大小):56px/24px px
font-family(字体体系):“黑体”/“幼圆”
font-style(是否倾斜): italic(倾斜)rmal(正常)
font-weight(字体粗细):100/200rmal(400)/bold(700)/bolder
font-variant(是否大写):normal/small-caps(小型大写)
案例:望月怀远
海上升明月,天涯共此时。 /大小24px 字体楷体 靠左
情人怨遥夜,竟夕起相思。 /颜色红色,靠右
灭烛怜光满,披衣觉露滋。 /左半句靠左,右半句靠右
不堪盈手赠,还寝梦佳期。 /大小30px 颜色蓝色 字体幼圆 居中
2.2文本相关属性
text-align(对齐方式):center(居中)/left(靠左)/right(靠右)
color(字体颜色):blue/red/pinkack/green/#FFFFFF/#F6F6F6
text-indent(首行缩进):2pxpx
text-decoration(上、下划线以及删除线): none(默认格式,无)/underline(下划线)/overline(上划线)ne-through
direction(文本方向): ltr(left to right从左到右)/rtl(right to left从右到左)
text-transform(大小写): none(默认)/capitalize(首字母大写)/uppercase(全部大写)/lowercase(全部小写)
line-height(行高): normal px
letter-spacing(字符间距): 2px/5px xpx
word-spacing(单词间距):normal/2px/5pxxpx
案例:江西老表
我是江西小霸王
江西这边我最狂
要说江西谁最帅
还得江西小霸王
行高5px
自己想一个题目,标签h1
第一句黑体,红色
第二句加删除线
第三句加上、下划线 从“西”处断开,分为“要说江西” “谁最帅” 间距50px
第四句单词间距10px
2.3颜色
RGB(red greed bule)(0,10,256)
#0010FF
CSS中颜色的表示方法
预定义颜色:bule ,red,black。。。
十六进制颜色:#0f0f0f
RGB颜色(128,0,0)全红
RGBA,在RGB的基础上又添加了表示透明度的Alpha
HSl:用色调,饱和度,和透明度三个分量来表示颜色
HSLA:在HSL的基础上又添加了表示透明度的Alpha
代码实现:<p style="color: blue;">预定义颜色</p>
<p style="color: rgb(0,255,0);">RGB颜色</p>
<p style="color: #ff0000;">16进制颜色</p>
2.4背景相关属性
Background-color:背景颜色
Background-image:背景图片
Background-repeat:图片复制选项(repeat在水平,垂直两个方向复制)
(repeat-x/y 在水平/垂直方向进行复制)
(no-repeat 不复制)
Background-position:图片所在位置 上top 下bottom 左left 右right
简写:将所有元素放在一起
有顺序要求:背景颜色->背景图片->重复方式->所在位置
background: url(img/pic.jpg) #87CEEB repeat-y right;
2.5尺寸相关属性
(1)固定高度与宽度(height:200px)
(2)自适应高度(高度会根据内容的增加而增加)
(3)指定最大高度max-height(内容增加到指定高度的时候就不会再增加)
(4)指定最小高度min-height(开始时高度固定,内容增加到一定地步时开始增加高度)
2.6显示相关属性
(1)visibility:hidden 仅仅隐藏内容,该元素所占位置依然存在
(2)display:none 不仅隐藏内容,而且隐藏位置
Display:inline 将块级元素以内联元素形式显示,此时宽,高等属性对其无效
Display:inline-block 将块级元素以内联元素形式显示并且具有块级元素的特征,宽,高属性依然有效
Display:block 将内联元素以块级元素的形式展现
2.7盒子模型
Margin:外边距
Margin-top(上) margin-bottom(下) margin-left(左) margin-right(右)
使用方式:
margin:30px ,表示上下左右外边距都设置30px
margin-left:30px ,表示设置距离左方30px
margin: 10px 20px 10px 20px 分别设置上右下左四个边的边距,顺序按照顺时针方向
margin:20px 30px 分别设置上下边距为20px ,左右边距为30px
Padding:内边距
与margin类似 上下左右边距都有
Border:边框
如果想让两个盒子在一行内,那么两个盒子都要浮动(float)并且给它们的父类清除浮动(overflow: hidden;)
什么是父类:
Box是div1和div2的父类
css小知识
最新推荐文章于 2021-05-06 15:14:40 发布