admin

css学习笔记(1)
(以下是我在imooc上学习的时候顺手记的,可能没有什么逻辑)CSS: 注释只能用/*...*/的形式来写,不能用...
扫描右侧二维码阅读全文
31
2018/05

css学习笔记(1)

(以下是我在imooc上学习的时候顺手记的,可能没有什么逻辑)

CSS:
注释只能用/*...*/的形式来写,不能用//
层叠式样式表css有三种写法,内联式、外联式和嵌入式三种,注意这里的内联式就是写在现有的html标签中
嵌入式一般写在<head>标签中,并且必须放在<style type = "text/css"></style>标签中
外联式的一般写法为<link href="base.css" rel="stylesheet" type="text/css" /> 注意其中的rel和type属性为固定写法,不可改变。href代表本地的一个.css文件
优先级是内联式大于嵌入式大于外联式,但嵌入大于外联的条件是位置在他前面,总的来说就是就近原则
除此之外,还需要注意权值问题

注意选择器的使用,如我们之前用的p1,span实际上就是选择器,而body也可以作为选择器
类选择器,需要先进行创建选择器,用.开头,然后再使用,就是去对span之类的class属性赋值
id选择器,把类选择器前面的原点换成#,然后把对应的class属性换成id即可
#需要注意的是,一个文档中id选择器只能使用一次,而类选择器无此限制
#可以使用类选择器词列表方法为一个元素同时设置多个样式。最后的class是"stress,bigsize"
子选择器 仅作用与第一代后代
包含(后代)选择器 作用于所有的后代,用空格刻画
通用选择器:将所有标签都设定为给定的属性
伪类选择符,可以用来设置不存在的标签(标签的某种状态),目前比较常用的是a:hover{}这个表示去设置对应标签被鼠标划过时的状态
分组选择符
注意css样式的继承性,但是有些css样式比如border solid red 就不具有继承性
#权值:标签的权值为1,类选择符的权值为10,ID选择符的权值最高为100。 权值是可以叠加的,继承带来的权值很小
#多个权值相同时候,以最后的为准

文字排版:
font-family
font-weight
font-style(italic为斜体)
text-decoration(underline为下划线、line-through为删除线)
段落排版:
缩进(text-indent:2em;}
设置行高(line-height:2em;}
字母或者文字间距:letter-spacing
单词间距:word-spacing
注意可以把一段文字或者几张图片划为一个板块,即一个div

#元素分类
在CSS中,html中的标签元素大体被分为三种不同的类型:块状元素、内联元素(又叫行内元素)和内联块状元素。
常用的块状元素有:
<div>、<p>、<h1>...<h6>、<ol>、<ul>、<dl>、<table>、<address>、<blockquote> 、<form>
常用的内联元素有:
<a>、<span>、<br>、<i>、<em>、<strong>、<label>、<q>、<var>、<cite>、<code>
常用的内联块状元素有:
<img>、<input>

#将内联元素转为块状元素的方法
a{display:block;}
#将块状元素转为内联元素的方法
a{display:inline;}
#将元素转为内联块状元素的方法
display:inline-block就是将元素设置为内联块状元素。(css2.1新增),

#块级元素的特点:
1、每个块级元素都从新的一行开始,并且其后的元素也另起一行。(真霸道,一个块级元素独占一行)
2、元素的高度、宽度、行高以及顶和底边距都可设置。
3、元素宽度在不设置的情况下,是它本身父容器的100%(和父元素的宽度一致),除非设定一个宽度。

#内联元素(又叫做行级元素的特点)内联元素特点:
1、和其他元素都在一行上;
2、元素的高度、宽度及顶部和底部边距不可设置;
3、元素的宽度就是它包含的文字或图片的宽度,不可改变。

#内联块状元素特点
1、和其他元素都在一行上;
2、元素的高度、宽度、行高以及顶和底边距都可设置。

#盒子模型
<div><p><h><ul><ol><table>这些块级标签都具有盒子模型的特征,
padding ,marigin等等,都具有四个方向的

-----盒子模型:边框
1、border-style(边框样式)常见样式有:
dashed(虚线)| dotted(点线)| solid(实线)。
2、border-color(边框颜色)中的颜色可设置为十六进制颜色,如:
border-color:#888;//前面的井号不要忘掉。
3、border-width(边框宽度)中的宽度也可以设置为:
thin | medium | thick(但不是很常用),最常还是用象素(px)。
也可以用border-top 、border-bottom来选定四个方向中的某一个的border进行设置

-----盒子模型:填充
如果上下填充一样为10px,左右一样为20px,可以这么写:
div{padding:10px 20px;}
如果上下填充一样为10px,左右一样为20px,可以这么写:
div{margin:10px 20px;}

#CSS布局模型
---流动模型(Flow):
第一点,块状元素都会在所处的包含元素内自上而下按顺序垂直延伸分布,因为在默认状态下,
块状元素的宽度都为100%。实际上,块状元素都会以行的形式占据位置。如右侧代码编辑器中
三个块状元素标签(div,h1,p)宽度显示为100%。
第二点,在流动模型下,内联元素都会在所处的包含元素内从左到右水平分布显示。

---浮动模型float
可以实现块状元素在同一行的显示

---层模型
三种形式:绝对、固定、相对定位
##绝对定位:
将元素从文档流中拖出来,然后使用left、right、top、bottom属性相对于其最接近的
一个具有定位属性的父包含块进行绝对定位。如果不存在这样的包含块,则相对于body
元素,即相对于浏览器窗口
##相对定位:
相对定位完成的过程是首先按static(float)方式生成一个元素(并且元素像层一样浮动了起来),然后
相对于以前的位置移动,移动的方向和幅度由left、right、top、bottom属性确定,偏移前的位置保留不动。
简而言之,相对定位的意思就是相对原来的位置去移动
##固定定位:
相对移动的额坐标是浏览器视图,起到的作用和background-attachment:fixed;属性功能相同

##相对定位和绝对定位的组合使用
参照定位的元素必须加入position:relative;

定位元素加入position:absolute,便可以使用top、bottom、left、right来进行偏移定位了。

#代码缩写
六位的颜色如果每两位相同,可以写成3位
一般情况下因为对于中文网站,英文还是比较少的,所以下面缩写代码比较常用:
body{
font:12px/1.5em "宋体",sans-serif;
}

#颜色值设置
1、英文命令颜色,如color:red;
2、RGB颜色,如color:rgb(255,255,255);或者color:rgb(30%,30%,30%)
3、十六进制设置,可以缩写

#长度值
px,em,%,需要注意的是这三者都是相对单位
em就是给元素设定的font-size值
当给 font-size 设置单位为 em 时,此时计算的标准以 p 的父元素的 font-size 为基础。
除此之外,还可以在font-size已经被设定的基础上来用百分比来设置对应的line-height

***CSS样式设计小技巧
通过在父元素中设置text-align:center 来设置子元素(文本或者是图片,但必须不是块状元素)居中显示
#定宽块状元素的居中显示:
设置margin-left设置margin-left:auto margin-right:auto 且不要忘记去把width:200px设定好,因为是定宽块状元素
#不定宽块状元素的居中显示:
不定宽度的块状元素有三种方法居中(这三种方法目前使用的都很多):
加入 table 标签 这里利用table标签的长度自适应性---即不定义其长度也不默认父元素body的长度(table其长度根据其内文本长度决定),因此可以看做一个定宽度块元素,
设置 display: inline 方法:与第一种类似,显示类型设为 行内元素,进行不定宽元素的属性设置
设置 position:relative 和 left:50%:利用 相对定位 的方式,将元素向左偏移 50% ,即达到居中的目的 ,这里注意要把父元素设置为float (PS:15.3这里讲了任何去把块状元素居中)

#line-height与font-size的差值就是我们所说的行间距

#父元素高度确定的多行文本、图片等的竖直居中的方法有两种:

.方法一:
使用插入 table (包括tbody、tr、td)标签,同时设置 vertical-align:middle。
css 中有一个用于竖直居中的属性 vertical-align,在父元素设置此样式时,会对inline-block类型的子元素都有用。
而且注意td标签中的vertical-align:middle 已经默认了,我们不需要显式设置
.方法二:
设置块级元素的 display 为 table-cell(设置为表格单元显示),激活 vertical-align 属性,
这种方法的好处是不用添加多余的无意义的标签,但缺点也很明显,它的兼容性不是很好,

最后一小节
1. position : absolute
2. float : left 或 float:right
简单来说,只要html代码中出现以上两句之一,元素的display显示类型就会自动变为以 display:inline-block(
块状元素)的方式显示,当然就可以设置元素的 width 和 height 了,且默认宽度不占满父元素。

内联式和嵌入的style设置不会覆盖,而是会叠加
要在div中控制text-align而不能在div h2{}中去控制text-align才能是h2标题居中
且div中设置之后可以使得所有元素居中

注意不需要通过Ps或者画图去改变下载图片的大小,只需要在.css文件中修改style即可,会自动适配的

Last modification:March 13th, 2019 at 07:06 pm
If you think my article is useful to you, please feel free to appreciate

Leave a Comment