王斌_2021.1.12王斌

知识点总结

1.后代选择器又称为包含选择器:空格即代表是后代

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

<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>
</body>

3.常用CSS属性

元素尺寸

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

width : value ;

比如:

width ;500px ;

宽度取值可以使用像素为单位,也可以使用百分比,比如:

width : 50%

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

height : value ;

4.外边距折叠

<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>

设置四周外边距

margin: value;

让块元素横向居中显示

margin: value auto;

5.盒子模型

        span {
            margin: 20px;
            padding: 20px;
            width: 80px;
            height: 50px;
            background-color: lightblue;
            border: 2px solid blue;
        }
    </style>
</head>
<body>
    <p>
        I am a paragraph and this is a <span>span</span> inside thatparagraph. A span is an inline element and so does not respect width and height.
        </P>

6.渐变背景

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%);

多个背景图片

也可以有多个背景图像—在单个属性值中指定多个 background-image 值,用逗号分隔每个值,其他 background-* 属性也可以有值逗号分隔的方式相同的 background-image

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;

7.处理不同方向的文本

溢出的文字内容

<style>
      .box {
        border: 1px solid #333333;
        width: 200px;
        height: 80px;
      }
</style>


<div class="box">这个盒子有高有宽。这意味着如果在指定的高度内显示的内容太多,就会出现溢出的情况。如果溢出设置为隐藏,则任何溢出都将不可见。</div>
<p>此内容在方框之外。</p>

overflow属性

overflow 属性是你控制一个元素溢出的方式,它告诉浏览器你想怎样处理溢出。 overflow 的默认值为 visible ,这就是我们的内容溢出的时候,我们在默认情况下看到它们的原因。

visible :默认值。内容不会被修剪,会呈现在元素框之外。
hidden :隐藏掉溢出。其余内容是不可见的。
scroll :显示滚动条,即使没有足够多引起溢出的内容
auto: 如果内容需要被修剪,则浏览器会显示滚动条以便查看其余的内容。

8.鼠标样式

cursor 属性用于定义鼠标样式,可选值有: pointer 、 wait 、 help 、 copy 、 crosshair;用户也可以自定义一个鼠标样式:

cursor: url(xxx),auto;

修改滚动条样式

/* 滚动条整体部分 */
.lyric-container::-webkit-scrollbar{
width: 15px;
height: 15px;
}
/* 定义滚动条的轨道颜色、内阴影及圆角 */
.lyric-container::-webkit-scrollbar-track{
background: rgb(239, 239, 239);
border-radius:2px;
}
/* 滚动条里面的小方块 */
.lyric-container::-webkit-scrollbar-thumb{
background: #bfbfbf;
border-radius:10px;
}
/*定义两端按钮的样式*/
.lyric-container::-webkit-scrollbar-button {
background-color:cyan;
}
/* 滚动条里面的小方块鼠标悬停的样式 */
.lyric-container::-webkit-scrollbar-thumb:hover{
background: 

心得体会

今天学习了许多知识,如常用的CSS属性元素尺寸(宽度和高度)边框(border)四周边框的粗细、风格、颜色,还学了设置四周外边距,总感觉自己跟不上学习进度,可能是自身的原因吧,尽快改正让自己能认真学习。

标签

评论


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