A股上市公司传智教育(股票代码 003032)旗下技术交流社区北京昌平校区

 找回密码
 加入黑马

QQ登录

只需一步,快速开始

上帝死了

初级黑马

  • 黑马币:

  • 帖子:

  • 精华:

[前端与移动开发] CSS基础

© 上帝死了 初级黑马   /  2019-8-19 19:20  /  619 人查看  /  0 人回复  /   0 人收藏 转载请遵从CC协议 禁止商业使用本文

1. 学会使用CSS选择器
2. 熟记CSS样式和外观属性
3. 熟练掌握CSS各种选择器
4. 熟练掌握CSS三种显示模式
5. 熟练掌握CSS背景属性
6. 熟练掌握CSS三大特性
7. 熟练掌握CSS盒子模型
8. 熟练掌握CSS浮动
9.熟练掌握CSS定位
CSS初识
CSS通常称为CSS样式表或层叠样式表(级联样式表),主要用于设置HTML页面中的文本内容(字体、大小、对齐方式等)、图片的外形(宽高、边框样式、边距等)以及版面的布局等外观显示样式。
CSS以HTML为基础,提供了丰富的功能,如字体、颜色、背景的控制及整体排版等,而且还可以针对不同的浏览器设置不同的样式。
引入CSS样式表(书写位置)(三种)
1内部样式表<style type="text/CSS">
    选择器 {属性1:属性值1; 属性2:属性值2; 属性3:属性值3;}
</style>
2行内式(内联样式)
<标签名 style="属性1:属性值1; 属性2:属性值2; 属性3:属性值3;"> 内容 </标签名>
3外部样式表(外链式)
<head>
  <link href="CSS文件的路径"  rel="stylesheet" />
</head>
CSS基础选择器
1标签选择器(元素选择器) 标签名{属性1:属性值1; 属性2:属性值2;}
2类选择器                 .类名{属性1:属性值1; 属性2:属性值2;}
3多类名选择器             <div class="pink fontWeight font20">亚瑟</div>
4id选择器                  #id名{属性1:属性值1; 属性2:属性值2; 属性3:属性值3; }
5通配符选择器             * { 属性1:属性值1; 属性2:属性值2; 属性3:属性值3; }
CSS字体样式属性
1font-size:字号大小
2font-family:字体
3font-weight:字体粗细
4font-style:字体风格
CSS外观属性
1color:文本颜色
2line-height:行间距
3text-align:水平对齐方式
4text-indent:首行缩进
5text-decoration 文本的装饰
CSS复合选择器
1交集选择器
记忆技巧:交集选择器 是 并且的意思。  即...又...的意思
2并集选择器记忆技巧:并集选择器  和 的意思,  就是说,只要逗号隔开的,所有选择器都会执行后面样式。
3后代选择器
4子元素选择器
5伪类选择器
6链接伪类选择器
标签显示模式(display)
1块级元素(block-level)
2行内元素(inline-level)
3行内块元素(inline-block)
标签显示模式转换 display
块转行内:display:inline;
CSS书写规范
空格规范    【强制】 选择器 与 { 之间必须包含空格。
选择器规范  【强制】 当一个 rule 包含多个 selector 时,每个选择器声明必须独占一行。
属性规范    【强制】 属性定义必须另起一行。
CSS 三大特性
1CSS层叠性
2CSS继承性
3CSS优先级
CSS 背景(background)
background-color背景颜色
background-image背景图片地址
background-repeat是否平铺
background-position背景位置
background-attachment背景固定还是滚动
圆角边框(CSS3)
border-radius: 50%;   让一个正方形  变成圆圈
盒子阴影(CSS3)
box-shadow:水平阴影 垂直阴影 模糊距离(虚实)  阴影尺寸(影子大小)  阴影颜色  内/外阴影;
浮动(float)
浮动(float)
1什么是浮动?
元素的浮动是指设置了浮动属性的元素会脱离标准标准流的控制,移动到其父元素中指定位置的过程。
2浮动详细内幕特性
浮动脱离标准流,====脱标==== 不占位置,会影响标准流。浮动只有左右浮动。
3为什么要清除浮动
清除浮动主要为了解决父级元素因为子级浮动引起内部高度为0 的问题。
清除浮动的方法
1额外标签法
2父级添加overflow属性方法
3使用after伪元素清除浮动
4使用before和after双伪元素清除浮动
定位(position)
元素的定位属性
top顶端偏移量,定义元素相对于其父元素上边线的距离
bottom底部偏移量,定义元素相对于其父元素下边线的距离
left左侧偏移量,定义元素相对于其父元素左边线的距离
right右侧偏移量,定义元素相对于其父元素右边线的距离
1静态定位(static)
2相对定位relative
3绝对定位absolute
4固定定位fixed

0 个回复

您需要登录后才可以回帖 登录 | 加入黑马