王庆召_20210112 王庆召

一、知识点总结

1、ID选择器

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

2 、伪类:

网页元素的各种状态
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-child 第一个子元素 */
p:first-child{
    color: red;
}
/* :last-child最后一个子元素 */
p:last-child{
    color: red;
}

3、后代选择器

后代选择器又称为包含选择器:空格即代表是后代
/*后代*/
li span{
    color: #0000ff;
}
li a{
    color: black;
}
.mydiv a{
}
#div1 a{
    font-size: 30px;
}
/*后代与伪类结合*/
li a:hover{
    color: red;
}
<div class=”mydiv”>
    <a href=”#”>是是</a>
</div>
<div id="di
<a href="#">是是</a>

4、子元素选择器

直接子标签适用此样式
>是子选择器的标志
<!DOCTYPE HTML>
<html>
<head>
<style type="text/css">
h1 > strong {color:red;}
</style>
</head>
    <body>
    <h1>This is <strong>very</strong> <strong>very</strong> important.</h1>
    <h1>This is <em>really <strong>very</strong></em> important.</h1>
    </boy>
</html>

子代选择器和后代选择器不同在于,只能出现在当前容器下的子类受用,不出现隔代继承。

5、通用选择器

*{
    margin: 0;
    padding: 0;
}

6、组合选择器

li,p,#div1,.mydiv{
    font-size: 16px;
    color: red;
}

7、常用CSS属性

7.1 元素尺寸
 元素尺寸设计元素宽度和高度两个属性。  

##### 7.2 宽度

在CSS代码中通过 width 属性可以控制元素的宽度,其用法为: 比如:

width : 500px ;
7.3 高度

在CSS代码中通过 height 属性可以控制元素的高度,其用法为:

heigth: value;
7.4 四周边框及粗细及风格及颜色
所谓四周边框,就是批量设置四条边的边框,让四条边具有相同样式的边框。
批量设置四边边框粗细可以通过 border-width 属性来实现:
批量设置四边边框风格可以通过 border-style 属性来实现:1 border-style : none | solid | double | dotted | ... ;
批量设置四边边框颜色可以通过 border-color 属性来实现:border-color : color ;
7.5 圆角边框
border-radius 属性是一个最多可指定四个 border -*- radius 属性的复合属性
这个属性允许你为元素添加圆角边框
例如:给div元素添加圆角的边框
div
{
    border:2px solid;
    border-radius:25px;
}
7.6 外边距
margin 属性设置元素的外边距
外边距是盒子周围一圈看不到的空间。它会把其他元素从盒子旁边推开。 外边距属性值可以为正也可以
为负。设置负值会导致和其他内容重叠。无论使用标准模型还是替代模型,外边距总是在计算可见部分
后额外添加
7.7 让块元素横向居中显示
margin: value auto;
7.8 外边距折叠

理解外边距的一个关键是外边距折叠的概念。如果你有两个外边距相接的元素,这些外边距将合并为一 个外边距,即最大的单个外边距的大小。 在下面的例子中,我们有两个段落。顶部段落的页 margin-bottom 为50px。第二段的 margin-top 为 30px。因为外边距折叠的概念,所以框之间的实际外边距是50px,而不是两个外边距的总和。

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
    <style>
    .one {
    margin-bottom: 50px;
    }
    .two {
    margin-top: 30px;
    }
    </style>
</head>
<body>
    <div class="container">
        <p class="one">I am paragraph one.</p>
        <p class="two">I am paragraph two.</p>
    </div>
</body>
</html>

8、 盒子模型

完整的 CSS 盒模型应用于块级盒子,内联盒子只使用盒模型中定义的部分内容。模型定义了盒的每个部
分 —— margin, border, padding, and content —— 合在一起就可以创建我们在页面上看到的内容。
8.1 盒模型的各个部分
CSS中组成一个块级盒子需要:
Content box: 这个区域是用来显示内容,大小可以通过设置 width 和 height .
Padding box: 包围在内容区域外部的空白区域; 大小通过 padding 相关属性设置。
Border box: 边框盒包裹内容和内边距。大小通过 border 相关属性设置。
Margin box: 这是最外面的区域,是盒子和其他元素之间的空白区域。大小通过 margin 相关属
性设置。

9、display

display 属性规定元素应该生成的框的类型。
display属性的值:
block:元素呈现块元素特征,此元素前后会带有换行符
inline:元素呈现行内元素特征,元素前后没有换行符
inline-block:元素呈现行内并保持宽和高的属性,行内块元素
none:元素不做呈现,不占网页空间。与visibility:hidden不同,visibility不显示但占用网页空间。
9.1 使用display:inline-block
display: inline-block 是一个特殊的值,它在内联和块之间提供了一个中间状态。这对于以下情况
非常有用:您不希望一个项切换到新行,但希望它可以设定宽度和高度,并避免上面看到的重叠。
一个元素使用 display: inline-block ,实现我们需要的块级的部分效果:
设置 width 和 height 属性会生效。
padding , margin , 以及 border 会推开其他元素。
但是,它不会跳转到新行,如果显式添加 width 和 height 属性,它只会变得比其内容更大

10、背景颜色

background-color 属性定义了CSS中任何元素的背景颜色。属性接受任何有效的 <color>值 。背景色
扩展到元素的内容和内边距的下面。
元素的背景是元素的总大小,包括填充和边界(但不包括外边距)

10、控制背景平铺

background-repeat 属性用于控制图像的平铺行为。可用的值是:
no-repeat — 不重复。
repeat-x —水平重复。
repeat-y —垂直重复。
repeat — 在两个方向重复。

11、渐变背景

linear-gradient 线性梯度渐变,延伸到整个盒子上
radial-gradient 有一个固定的大小,因此会重复
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、书写模式

CSS中的书写模式是指文本的排列方向是横向还是纵向的。 writing-mode 属性使我们从一种模式切换到另一种模式。
    writing-mode 的三个值分别是:
    horizontal-tb : 块流向从上至下。对应的文本方向是横向的。
    vertical-rl : 块流向从右向左。对应的文本方向是纵向的。
    vertical-lr : 块流向从左向右。对应的文本方向是纵向的。

13、overflow属性

14、修饰字体的文字

color:字体颜色
font-size:字体大小,通常用像素(px)来定义大小
font-weight:字体粗细
- bold 加粗
- normal 正常
- 100~900为字体指定了 9 级加粗度,数字 400 等价于 normal,而 700 等价于 bold
font-famliy:字体
- Serif 字体
- Sans-serif 字体
- Monospace 字体

- Cursive 字体
- Fantasy 字体
font-style:字体风格
- normal - 文本正常显示
- italic - 文本斜体显示
- oblique - 文本倾斜显示
text-decoration:字体加横线
- none 无
- underline 下划线
- overline 上划线
- line-through 贯穿线
- blink 文本闪烁
text-align:字体所处位置
- left
- right
- center
- inherit 继承父元素的text-align属性值
line-height:行高,一般要纵向居中设置为 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 把元素的底端与父元素字体的底端对齐。

15、阴影

box-shadow: h-shadow v-shadow blur spread color inset;

16、透明度

opacity 用于设置元素的透明度, 值的范围是 0~1 。1 为不透明, 0 为完全透明

17、文本溢出处理

/* 溢出文本处理 */
overflow: hidden; /* 溢出部分 隐藏 */
white-space: nowrap; /* 空白部分 不换行 */
text-overflow: ellipsis; /* 溢出的文本变成省略号 */
17.1 文本溢出实例
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        
        <style type="text/css">
            .box{
                width: 500px;
                height: 30px;
                font-size: 24px;
                /* 溢出文本处理 */
                overflow: hidden; /* 溢出部分 隐藏  */
                white-space: nowrap; /* 空白部分 不换行 */
                text-overflow: ellipsis; /* 溢出的文本变成省略号  */
            }
        </style>
    </head>
    <body>
        <div class="box" title="央行:征信机构不得过度采集信用信息,采集的个人不良信息的保存期限 自不良行为或事件终止之日起5年">
            央行:征信机构不得过度采集信用信息,采集的个人不良信息的保存期限 自不良行为或事件终止之日起5年
            </div>
        
    </body>
</html>

二、心得体会

  1. 今日在复习CSS知识点的时候,对于一些从前的知识点的理解还不深刻,今日的学习,使我对某些知识点有了更加深刻理解和运用;
  2. 学习贵在坚持,希望自己继续坚持和努力;

标签

评论

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