发表于: 2019-11-11 20:19:21
1 1201
今天完成的事情
复习了js2-4任务的知识点,为复盘申请做准备
今天遇到的问题
暂无
今天的收获
整理了下css任务的一些笔记,为复盘申请做准备
1.CSS:Cascading Style Sheet层叠样式表,又称风格样式表Style Sheet,用于设计网页风格。
2.CSS3的基本语法结构:
(1)CSS中注释为 /*内容*/
(2)CSS规则由选择器、声明组成。
(3)声明必须放在大括号{}中,声明可以是一或多条。
(4)每条声明由一个属性和值组成,属性和值用冒号:分开,每条语句以分号;结尾如
<style type="text/css">
h1{
font-size : 12px;
color : red;
}
</style>
3.在HTML中引入CSS样式的方式:
(1)行内样式:直接在标签中用style属性设置CSS样式。
<p style="font-size:10px;">字体大小</p>
(2)内部样式表:把css代码写在<head>的<style>中,规范化应写为<style type="text/css">
(3)外部样式表:文件扩展名为.css 在外部样式表中可直接写样式代码,不需要<style>标签。
a.链接式引用外部样式表(常用):
<head>
<link href="外部样式表路径" rel="stylesheet" type="text/css"/>
</head>
b.导入式引用外部样式表:
<head>
<style>
@import url("外部样式表路径");
</style>
</head>
4.样式优先级:"就近原则",行内样式>内部样式表>外部样式表
当有很多样式时,用 !important 可以为某一个样式覆盖掉其他所有样式。
如 #textcolor{ clor:pink !important;}
5.CSS选择器命名规范:驼峰命名法,用语义化单词命名且不能和ID选择器同名.
6.CSS3的基本选择器
(1)标签选择器:以标签名作选择器的名称如 h1{color:red;}
(2)类选择器:选择器名可自定义如 .red{color:red;}同时要设置<标签 class="red">内容</标签>
(3)ID选择器:选择器名可自定义如 #red{color:red;}同时要设置<标签 id="red">内容</标签>,但同一个id属性的选择器在页面中只能用一次。
7.基本选择器的优先级:ID选择器>类选择器>标签选择器
8.CSS3的高级选择器
1.层次选择器:
(1)后代选择器A B{ }:中间用空格隔开,只要是A的后代元素都会被选中。
(2)子选择器A>B{ }:只能选择A的子元素。
(3)相邻兄弟选择器A+B{ }:只用于A后面一个同级元素
(4)通用兄弟选择器A~B{ }:用于A后面所有的同级元素
2.结构伪类选择器:根据文档对象模型DOM的节点(元素级别)来操作。
(1)B:first-child 作为父元素的第一个子元素B,作用和(3)相似
(2)B:last-child 作为父元素的最后一个子元素B
(3)A B:nth-child(n) 在父级中查第n个子元素是不是B,不分类型
(4)B:first-of-type 选择父元素内B类型的第一个元素B
(5)B:last-of-type 选择父元素内B类型的最后一个元素B
(6)A B:nth-of-type(n) 在父级里先是不是B类型,再看位置n
3.属性选择器:
(1)A[arrt] 选择包含属性arrt的A标签(也可写多个属性,但要同时存在)
(2)A[arrt = val] 选择包含属性arrt,且属性值=val(区分大小写)的A标签
(3)A[arrt ^= val] 选择包含属性arrt,且属性值以val开头的任意字符串
(4)A[arrt $= val] 选择包含属性arrt,且属性值以val结尾的任意字符串
(5)A[arrt *= val] 选择包含属性arrt,且属性值包含val字符串的A标签
9.CSS3设置文本样式:
(1)<span>标签:用来设置行内元素(或几个文字)的样式。
(2)字体样式:
font-size:常用单位px
font-family:若同时设中英文字体,英文字体要设置在中文字体前面
font-style:normal标准、italic斜体、oblique倾斜
font-variant:small-caps; 字体设置为新型的大写字母,所有小写字母都转换为大写。
font-weight:normal标准、bold粗、bolder更粗、lighter细、100-900数字越大越粗
font:一次设置字体所有属性,顺序为"字体风格-粗细-大小-类型"
如 font:italic bold 36px "宋体";
(3)用font简写方式至少要指定 font-size和 font-family 属性,其他的属性(如font-weight、font-style、font-variant、line-height)如未指定将使用默认值。缩写时 font-size 与 line-height中间要加"/"斜扛如 "12px/1.5em"
10.Text-transform:控制文本的大小写:
none 默认,定义既有小写字母也有大写字母的标准文本(原文)
capitalize 每个单词以大写字母开头
uppercase 全部为大写字母
lowercase 全部小写字母
inherit 从父元素继承text-transform属性的值。
11.direction属性:规定文本的方向/书写方向。
ltr 文本方向从左到右
rtl 方向从右到左
inherit 继承父元素direction属性的值。
12.文字排版
(1)适用大多数浏览器:
从左向右 writing-mode: vertical-lr;
从右向左 writing-mode: vertical-rl;
(2)只适用IE浏览器:
从左向右 writing-mode: tb-lr;
从右向左 writing-mode: tb-rl
明天的计划
完成复盘申请PPT
完成小课堂
评论