张婷_20210112张婷

知识点总结:

一:ID选择器:

网络标签ID与ID选择器同名,会使用此样式,ID要唯一。

1.1:元素编号:在HTML页面上每个元素都应该有一个唯一的编号,浏览器可以通过这个编号来管理该元素。这个编号就是元素编号,也称为元素标识符。

​ 元素编号可以通过元素的ID属性来指定:



​ 作为元素标识符,我们应尽力保证id属性取值唯一性。

1.2:id选择器也称作id选择符,英文称作id selector,其基本用法为:
#elementId{

}

其作用是选择页面上id属性中等于指定值的元素。
1.3:伪类:元素的各种状态。
a:link{
color:#555555;
text-decoration:none;
}
a:visited{
color:#555555;
}
a:hover{
color:orange;
text-decoration:underline;
}
a:active{
color:red;
}
a:link:为访问状态
a:visited:访问过后状态
a:hover:鼠标悬停状态
a:active:激活选定状态
注:定义顺序必须是此顺序
/:first-chile第一个子元素/
P:first-child{
color:red;
}
/:last-child最后一个子元素/
p:last-child{
color:red;
}

1.4:后代选择器又称为包含选择器:空格即代表是后代
/后代/
li span{
color:#0000ff;
}
li a{
color:black;
}
.mydiv a{

}
#div1 a{
     font-size:30px;
}

/后代与伪类结合/
li a:hover{
color:red;
}

1.5 子元素选择器:直接子标签适用此样式
.....


This isveryveryimportant.

This is really very important.


子代选择器和后代选择器不同在于,只能出现在当前容器下的子类受用,不出现隔代继承。
1.6.通用(配)选择器
{
margin:0;
padding:0;
}
1.7.组合选择器
li,p,#div1,.mydiv{
font-size:16px;
color:red;
}
二:常用css属性
2.1:元素尺寸:元素尺寸设计元素宽度和高度两个属性
2.2:在css代码中通过width属性可以控制元素的宽度,其用法为:width:value;
宽度取值可以使用像素为单位,也可以使用百分比,采用百分比时要注意,元素的实际宽度都是相对于父元素的宽度来确定的。
2.3:高度:height:value;
2.4:边框:设计粗细,样式,颜色,某一条边边框的粗细,样式,颜色
2,5:四周边框:批量设计四条边的边框,让四条边具有相同样式的边框。
2.6设置四条边框粗细:border-width:width;
2.7:批量设置四条边框的风格:border-style:none|solid|double|dotted|....;
颜色:border-color:color:
粗细、风格、颜色:border:width style color;
2.8:顶部边框:单独设置顶部的边框,让顶部的边框具有独特的样式
2.9:顶部边框粗细:border-top-width;
顶部边框风格:border-top-style : none | solid | double | dotted | ...
2.10 顶部边框颜色
单独设置顶部边框颜色可以通过 border-top-color 属性来实现: 2.2.2.4 顶部边框
依次设置顶部边框的 粗细、风格、颜色 可以通过 border-top 属性来实现:
注意 border-top 属性值的书写顺序: 1. 粗细 ( width )
外边距:margin
内边距:padding
2.11盒模型
盒模型的各个部分
CSS中组成一个块级盒子需要:
Content box: 这个区域是用来显示内容,大小可以通过设置 width 和 height .
Padding box: 包围在内容区域外部的空白区域; 大小通过 padding 相关属性设置。
Border box: 边框盒包裹内容和内边距。大小通过 border 相关属性设置。
Margin box: 这是最外面的区域,是盒子和其他元素之间的空白区域。大小通过 margin 相关属
性设置。
2.12标准盒模型
在标准模型中,如果你给盒设置 width 和 height ,实际设置的是 content box。 padding 和 border
再加上设置的宽高一起决定整个盒子的大小。
三:背景:
3.1:背景颜色:background-color 属性定义了CSS中任何元素的背景颜色。属性接受任何有效的 值 。背景色
扩展到元素的内容和内边距的下面。
元素的背景是元素的总大小,包括填充和边界(但不包括外边距)
color 指定背景颜色。eg: #567895 black rgb(255,255,255) rgba(255,255,255,.5) hsl(h 色相 0 到 360, s 饱和度 0% 为灰色, 100% 全 色, l 亮度 0% 为暗, 50% 为普通, 100% 为白) hsla()

transparent 指定背景颜色应该是透明的。这是默认
inherit 指定背景颜色,应该从父元素继承
3.2 背景图片
background-image 属性允许在元素的背景中显示图像.
默认情况下,大图不会缩小以适应方框,因此我们只能看到它的一个小角,而小图则是平铺以填充方框。
3.3 控制背景平铺
background-repeat 属性用于控制图像的平铺行为。可用的值是: no-repeat — 不重复。
repeat-x —水平重复。
repeat-y —垂直重复。
repeat — 在两个方向重复。
background-repeat 是 background-repeat-x 和 background-repeat-y的简写
3.4 调整背景图像的大小
background-size 属性,它可以设置长度或百分比值,来调整图像的大小以适应背景
你也可以使用关键字: cover —浏览器将使图像足够大,使它完全覆盖了盒子区,同时仍然保持其高宽比。在这种情况
下,有些图像可能会跳出盒子外
contain — 浏览器将使图像的大小适合盒子内。在这种情况下,如果图像的长宽比与盒子的长宽
比不同,则可能在图像的任何一边或顶部和底部出现间隙。
3.5 背景图像定位
background-position 属性允许您选择背景图像显示在其应用到的盒子中的位置。它使用的坐标系中,框的左上角是(0,0),框沿着水平(x)和垂直(y)轴定位。
注意:默认的背景位置值是(0,0)
最常见的背景位置值有两个单独的值——一个水平值后面跟着一个垂直值,你可以使用像 top 和 right 这样的关键字或者使用 长度值, and 百分比:你也可以混合使用关键字,长度值以及百分比:
最后,您还可以使用4个值的语法来指示到盒子的某些边的距离:
注意: background-position 是[ background-position-x 和 background-position-y 的简写
3.5渐变背景
background-image: linear-gradient(105deg, rgba(0,249,255,1) 39%, rgba(51,56,57,1) 96%); background-image: radial-gradient(circle, rgba(0,249,255,1) 39%, rgba(51,56,57,1) 96%);
渐变——当它用于背景时——就像图像一样,也可以使用 background-image 属性设置。
网上有许多渐变生成器,比如 这个 可以创建一个渐变,然后复制并粘贴生成它的源代码
linear-gradient 线性梯度渐变,延伸到整个盒子上
radial-gradient 有一个固定的大小,因此会重复
3.6多个背景图像
也可以有多个背景图像—在单个属性值中指定多个 background-image 值,用逗号分隔每个值
其他 background-* 属性也可以有值逗号分隔的方式相同的 background-image : 2.7.5 背景附加
另一个可供选择的背景是指定他们如何滚动时,内容滚动。这是由 background-attachment 属性控制的,它可以接受以下值: scroll : 使元素的背景在页面滚动时滚动。如果滚动了元素内容,则背景不会移动。实际上,背景被固定在页面的相同位置,所以它会随着页面的滚动而滚动。
fixed : 使元素的背景固定在视图端口上,这样当页面或元素内容滚动时,它就不会滚动。它将始
终保持在屏幕上相同的位置。
local : 这个值是后来添加的(它只在Internet Explorer 9+中受支持,而其他的在IE4+中受支持),
因为滚动值相当混乱,在很多情况下并不能真正实现您想要的功能。局部值将背景固定在设置的元
素上,因此当您滚动元素时,背景也随之滚动。
3.7 background-clip
background-clip 设置元素的背景(背景图片或颜色)是否延伸到边框、内边距盒子、内容盒子下
面。
值:
border-box 背景延伸至边框外沿(但是在边框下层)
padding-box 背景延伸至内边距( padding )外沿。不会绘制到边框处。
content-box 背景被裁剪至内容区(content box)外沿
text 背景被裁剪成文字的前景色(这是一个实验性的 API,请尽量不要在生产环境中使用它。) 2.7.7 使用background 的简写
经常看到使用 background 属性指定的背景。这种简写允许您一次设置所有不同的属性
background-image: linear-gradient(105deg, rgba(0,249,255,1) 39%, rgba(51,56,57,1) 96%); background-image: radial-gradient(circle, rgba(0,249,255,1) 39%, rgba(51,56,57,1) 96%); 12 background-image: url(image1.png), url(image2.png), url(image3.png), url(image1.png); background-repeat: no-repeat, repeat-x, repeat; background-position: 10px 20px, top right; 123
background 是一种 CSS 简写属性,用于一次性集中定义各种背景属性,包括 color, image, origin 与
size, repeat 方式等等。可以在一次声明中定义一个或多个属性: background-clip 、 background- color 、 background-image 、 background-origin 、 background-position 、 background- repeat 、 background-size ,和 background-attachment 。
对于所有简写属性,任何没有被指定的值都会被设定为它们的 初始值。
语法如下:
在每一层中,下列的值可以出现 0 次或 1 次:
只能紧接着 出现,以"/"分割,如: " center/80% ".
可能出现 0 次、1 次或 2 次。如果出现 1 次,它同时设定 background-origin(原点位置) 和 background-clip 。如果出现 2 次,第一次的出现设置 background-origin ,第二次的出现
设置 background-clip 。 只能被包含在最后一层。
2.8 处理不同方向的文本
默认浏览器对方向从左到右的文本(如英文或法文)的支持,要优于从右到左的文本(如阿拉伯语)的支持。然而,CSS在最近几年得到了改进,以更好地支持不同方向的文本,包括从右到左,也包括从上到下的文本(如日文)——这些不同的方向属性被称为书写模式。

writing-mode 的三个值分别是:
horizontal-tb : 块流向从上至下。对应的文本方向是横向的。
vertical-rl : 块流向从右向左。对应的文本方向是纵向的。
vertical-lr : 块流向从左向右。对应的文本方向是纵向的。
因此, writing-mode 属性实际上设定的是页面上块级元素的显示方向——要么是从上到下,要么是从
右到左,要么是从左到右。而这决定了文本的方向。
3.8 溢出的内容
我们知道,CSS中万物皆盒,因此我们可以通过给 width 和 height 赋值的方式来约束盒子的尺寸。溢出是在你往盒子里面塞太多东西的时候发生的,所以盒子里面的东西也不会老老实实待着。
值 描述visible 默认值。内容不会被修剪,会呈现在元素框之外。
hidden 隐藏掉溢出。其余内容是不可见的。
scroll 显示滚动条,即使没有足够多引起溢出的内容
auto 如果内容被修剪,则浏览器会显示滚动条以便查看其余的内容。
一个盒子,在块方向上已经受到 height 的限制。然后我们已经加了过多的内容,以至于盒子里面没有空间容纳。内容正在从盒子里面溢出,并让自己把盒子下面的段落弄得一团糟。
为什么CSS默认会采取如此不整洁的方式,让内容这么凌乱地溢出出来呢?为何不把多余的内容隐藏起来,或者让盒子变大呢?
只要有可能,CSS就不会隐藏你的内容,隐藏引起的数据损失通常会造成困扰。在CSS的术语里面,这会导致一些内容消失,你的访客可能不会注意到这一点,如果消失的是表格上的提交按钮,没有人能填完这个表格,这是很麻烦的事情!所以CSS反而会把它以可见的形式溢出出去。这样做的结果就是,你会看到错误的CSS导致的一片混乱,或者最坏的情况也只是你的网站的访客会告诉你有些内容冒了出来,你的网站需要修缮。
2.9.1 9.1 overflow属性
overflow 属性是你控制一个元素溢出的方式,它告诉浏览器你想怎样处理溢出。 overflow 的默认值
为 visible ,这就是我们的内容溢出的时候,我们在默认情况下看到它们的原因。
可选值:

这个盒子有高有宽。这意味着如果在指定的高度内显示的内容太多,就会出 现溢出的情况。如果溢出设置为隐藏,则任何溢出都将不可见。

此内容在方框之外。

12345678910111213
单位 名称
cm 厘米
mm 毫米
Q 四分之一毫米
in 英寸
pc 十二点活字
pt 点 px 像素
你可以用 overflow 属性指定x轴和y轴方向的滚动,同时使用两个值进行传递。如果指定了两个
关键字,第一个对 overflow-x 生效而第二个对 overflow-y 生效。否则, overflow-x 和 overflow-y 将会被设置成同样的值。例如, overflow: scroll hidden 会把 overflow-x 设置
成 scroll ,而 overflow-y 则为 hidden 2.10 10. CSS的值
3.8长度
最常见的数字类型是 ,例如10px(像素)或30em。CSS中有两种类型的长度——相对长度和绝对长度。重要的是要知道它们之间的区别,以便理解他们控制的元素将变得有多大。
3.9绝对长度单位
以下都是绝对长度单位——它们与其他任何东西都没有关系,通常被认为总是相同的大小。
这些值中的大多数在用于打印时比用于屏幕输出时更有用。例如,我们通常不会在屏幕上使用cm。惟一一个经常使用的值,估计就是px(像素)。
3.10 修饰字体文字
color:字体颜色
font-size:字体大小,通常用像素(px)来定义大小
font-weight:字体粗细

  • bold 加粗
  • - normal 正常
  • - 100~900为字体指定了 9 级加粗度,数字 400 等价于 normal,而 700 等价于 bold fon
  • t-famliy:字体
  • - Serif 字体
  • - Sans-serif 字体
  • - Monospace 字体
  • Cursive 字体
  • - Fantasy 字体
  • font-style:字体风格
  • - normal - 文本正常显示
  • - italic - 文本斜体显示
  • text-decoration:字体加横线
  • - none 无
  • - underline 下划线
  • - overline 上划线
  • - line-through 贯穿线
  • - blink 文本闪烁
  • text-align:字体所处位置
  • - left - right - center - inherit
  • 继承父元素的text-align属性值
  • line-height:行高
  • text-indent:首行字的缩进 建议用em(缩进多少倍数)做为单位
  • text-shadow:
  • 3px 4px 5px #AAA阴影 (CSS3的效果) - 3px向右偏移的像素值 - 4px向下偏移的像素值 - 5px 模糊效果 - #AAA 阴影颜色
  • vertical-align设置元素的垂直对齐方式。 - baseline 默认。元素放置在父元素的基线上。
  • - sub 垂直对齐文本的下标。
  • - super 垂直对齐文本的上标
  • - top 把元素的顶端与行中最高元素的顶端对齐
    • text-top 把元素的顶端与父元素字体的顶端对齐
  • - middle 把此元素放置在父元素的中部。 - bottom 把元素的顶端与行中最低的元素的顶端对齐。
  • - text-bottom 把元素的底端与父元素字体的底端对齐。
    h-shadow 必需的。水平阴影的位置。允许负值
    v-shadow 必需的。垂直阴影的位置。允许负值
    blur 可选。模糊距离(程度)
    spread 可选。阴影的大小
    color 可选。阴影的颜色。
    inset 可选。从外层的阴影(开始时)改变阴影内侧阴影

学习心得:老师讲课思路清晰,虽然有的时候有点盯不住,但是大多数时候感觉很充实,唯一担心的是我和老师的一头秀发,回去赶紧多修护了一下我的头发,防止“少年不知头发好,秃顶方悔护发迟”的悲剧发生。

标签

评论


© 2021 成都云创动力科技有限公司 蜀ICP备20006351号-1