CSS3基础知识学习总结笔记

最新推荐文章于 2022-10-28 10:25:12 发布

叔叔有糖吃

最新推荐文章于 2022-10-28 10:25:12 发布

阅读量1.1k

点赞数 1

分类专栏： HTML5 文章标签： css web html5

本文链接：https://blog.csdn.net/u011771755/article/details/46549445

版权

HTML5 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

1.CSS3选择器详解

1.1 属性选择器：

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        [id*="div"]{
            color: aqua;
        }
        [id^="div"]{
            color:blue;
        }
        [id$="div"]{
            color:blueviolet;
        }
    </style>
</head>
<body>
    <div id="div1">this is div 1</div>
    <div id="div2">this is div 2</div>
    <div id="div3">this is div 3</div>
    <div id="div4">this is div 4</div>
    <div id="mydiv">this is div 5</div>
</body>
</html>

讲解：
[attr*=val]：只要val中包含了id中有的字段，就会被包括
[attr^=val]：满足attr属性值以val开头，那么久会被包括进来
[attr$=val]： attr属性值的尾字符以val结束，就会被选中

1.2 结构性伪类选择器

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        p:first-line{
            color:blueviolet;
        }
        p:first-letter{
            color:antiquewhite;
        }
        li:before{
            content: "--";
            color: blue;
        }
        li::after{
            content: "description";
            color: gray;
            font-size: 10px;
        }
    </style>
</head>
<body>
    <p>this is the first line <br/> this is the second line.</p>
    <ul>
        <li>item1</li>
        <li>item2</li>
        <li>item3</li>
    </ul>
</body>
</html>

包含了伪类选择器和伪元素选择器。

1.3 选择器root，not，empty和target

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        /*root*/
        :root{
            background-color: gray;
        }
        body{
            background-color: antiquewhite;
        }
        /*not*/
        .div1 *:not(h1){
            color: red;
        }
        /*empty*/
        :empty{
            background-color: aqua;
        }
        /*target*/
        :target{
            background-color: chartreuse;
        }
    </style>
</head>
<body>
    <div class="div1">
        This is div1.
        <p>this is p.</p>
        <h1>this is h1</h1>
    </div>
    <table border="1">
        <tr>
            <td>item1</td>
            <td>item2</td>
        </tr>
        <tr>
            <td>item1</td>
            <td></td>
        </tr>
        <tr>
            <td></td>
            <td>item2</td>
        </tr>
    </table>
    <a href="#div1">menu1</a>|
    <a href="#div2">menu2</a>|
    <a href="#div3">menu3</a>
    <div id="div1">
        <h1>DIV1</h1>
        <p>div1 content</p>
    </div>
    <div id="div2">
        <h1>DIV1</h1>
        <p>div1 content</p>
    </div>
    <div id="div3">
        <h1>DIV1</h1>
        <p>div1 content</p>
    </div>
</body>
</html>

1.4 选择器：first-child，last-child，nth-child和nth-last-child

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        /*第一个子对象*/
        li:first-child{
            background-color: chartreuse;
        }
        /*最后一个子对象*/
        li:last-child{
            background-color: aqua;
        }
        /*正数第几个子对象*/
        li:nth-child(2){
            background-color: brown;
        }
        /*倒数第几个子对象*/
        li:nth-last-child(2){
            background-color: deeppink;
        }
    </style>
</head>
<body>
    <ul>
        <li>item1</li>
        <li>item2</li>
        <li>item3</li>
        <li>item4</li>
        <li>item5</li>
        <li>item6</li>
    </ul>
</body>
</html>

其中特殊情况，重复样式的设置：

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        li:nth-child(4n+1){
            background-color: aqua;
        }
        li:nth-child(4n+2){
            background-color: aliceblue;
        }
        li:nth-child(4n+3){
            background-color: brown;
        }
        li:nth-child(4n){
            background-color: deeppink;
        }
    </style>
</head>
<body>
    <ul>
        <li>item1</li>
        <li>item2</li>
        <li>item3</li>
        <li>item4</li>
        <li>item1</li>
        <li>item2</li>
        <li>item3</li>
        <li>item4</li>
        <li>item1</li>
        <li>item2</li>
        <li>item3</li>
        <li>item4</li>
        <li>item1</li>
        <li>item2</li>
        <li>item3</li>
        <li>item4</li>
        <li>item1</li>
        <li>item2</li>
        <li>item3</li>
        <li>item4</li>
    </ul>
</body>
</html>

1.5 选择器：nth-of-type 和 nth-last-of-type

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        /*h2:nth-child(odd){
            background-color: deeppink;
        }*/
        h2:nth-of-type(odd){
            background-color: deeppink;
        }
        h2:nth-last-of-type(odd){
            background-color: aqua;
        }
    </style>
</head>
<body>
    <h2>Title</h2>
    <p>detail content</p>
    <h2>Title</h2>
    <p>detail content</p>
    <h2>Title</h2>
    <p>detail content</p>
    <h2>Title</h2>
    <p>detail content</p>
</body>
</html>

1.6 选择器：only-child
当只有一个子元素的时候，就可以用only-child代替掉nth-child和nth-last-child

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        li:only-child{
            background-color: deeppink;
        }
    </style>
</head>
<body>
    <ul>
        <li>item1</li>
    </ul>
    <ul>
        <li>item1</li>
    </ul>
    <ul>
        <li>item1</li>
        <li>item1</li>
        <li>item1</li>
        <li>item1</li>
        <li>item1</li>
    </ul>
</body>
</html>

1.7 UI元素状态伪类选择器
概念：
指定的样式只有在当元素处于某种状态下时才会起作用，在默认状态时不起作用：css3种一共有17种UI元素状态伪类选择器：E：hover，E：active，E：focus，E：disable，E：read-only，E:checked，E：default，E：indeterminate…等等
示例：

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        /*hover focus active*/
        input[type="text"]:hover{
            background-color: deeppink;
        }
        input[type="text"]:focus{
            background-color: aqua;
        }
        input[type="text"]:active{
            background-color: blue;
        }
        input[type="checkbox"]:checked{
            outline: 2px solid deeppink;
        }
    </style>
</head>
<body>
    <input type="text" name="name">
    <input type="text" name="age">
    <br/>
    <input type="checkbox">read
    <input type="checkbox">move
    <input type="checkbox">study
</body>
</html>

1.8 disabled和enabled

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        input[type="text"]:disabled{
            background-color: grey;
        }
        input[type="text"]:enabled{
            background-color: aqua;
        }
    </style>
    <script>
        function changeText(){
            var radio1=document.getElementById("radio1");
            var radio2=document.getElementById("radio2");
            var text=document.getElementById("text");
            if(radio1.checked){
                text.disabled="";
            }
            if(radio2.checked){
                text.value="";
                text.disabled="disabled";
            }
        }
    </script>
</head>
<body>
    <input type="radio" id="radio1" name="radio" onchange="changeText()">可用
    <input type="radio" id="radio2" name="radio" onchange="changeText()"  checked >不可用
    <input type="text" id="text" disabled>
</body>
</html>

1.9 通用兄弟元素选择器

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        /*有效果*/
        .sdiv ~ p{
            background-color: aqua;
        }
        /*无效果*/
        .maindiv ~ p{
            background-color: aqua;
        }
    </style>
</head>
<body>
    <div class="maindiv">
        <div class="sdiv">
            <p>sssssssssss</p>
            <p>sssssssssss</p>
        </div>
        <p>sssssssssss</p>
        <p>sssssssssss</p>
        <p>sssssssssss</p>
        <p>sssssssssss</p>
    </div>
</body>
</html>

2. CSS3文字与字体样式

2.1 给文字添加阴影：

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        div{
            /*这里可以加多个阴影*/
            text-shadow: 5px 5px 5px #ff00ff,10px 10px 5px #ff00ff,15px 15px 5px #ff00ff;
            font-size: 50px;
            font-weight: bold;
            font-family: fantasy;
        }
    </style>
</head>
<body>
    <div>
        Text
    </div>
</body>
</html>

2.2 使用服务器端字体

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        @font-face {
            font-family: MyWebFont;
            /*如果客户端没有这个字体，就会去加载服务器上的字体*/
            src:local("MyWebFont"),
                url("impact.ttf");
        }
        div{
            font-family: MyWebFont;
        }
    </style>
</head>
<body>
    <div>This is my page</div>
</body>
</html>

利用font-size-adjust修改字体种类而保持字体大小不变
利用font-size-adjust属性，微调字体大小，最终可以获取到想要的效果

3. CSS3盒子相关样式

3.1 盒子的类型：display属性
一般有：inline，block，inline-block，inline-table，list-item
inline是没法设置宽度的，block可以设置宽度，但是如果既想要inline的不换行效果，又要block可以设置宽度的效果，这时就要用到inline-block了；
inline-table是给table标签使用的，使得table也变成内联元素；
list-item可以将一般的元素变成列表的形式展现。

3.2 盒子容不下内容的展示：overflow属性
hidden：超过的文字就会被隐藏，看不到
scroll：看不到的文字可以通过滚动看到
auto：会根据内容自动的增加水平或者竖直的滚动条
visible：与设置此属性效果一样，会影响布局
另外还有：overflow-x，overflow-y

3.3 盒子阴影：box-shandom属性
使用这个属性可以未盒子设置出想要的阴影效果。

3.4 盒子大小设置：box-sizing
一共有两个：border-box；content-box
第一个表示整个元素的宽度和高度包括在整个盒子当中；而第二个表示只有内容部分包括在整个盒子当中；

4. CSS3盒子背景样式

盒子背景样式：backgroud-clip：

border-box：内边距，边框和内容都会有效果
padding-box：只有内边距和内容有背景效果
content-box：只有内容会有背景效果

圆角边框：border-radius 属性设置
图像边框：border-image

5. CSS3变形处理

transform属性：
rotate(角度)：旋转
scale（缩放比例）：缩放
skew （水平方向倾斜角度，垂直方向倾斜角度）：倾斜
translate（x轴移动距离，y轴移动距离）：移动

一个元素多种变形方法添加：
只要在transform属性中后面，添加多个变形效果即可；
多个变形方法添加的顺序不同，会导致最后元素所在的位置会有不一样的效果，因此要注意这些细节。

改变缩放的基准点：transform-origin属性
通过改变基准点，可以使变形产生不一样的效果

6. CSS3动画效果

6.1 Transition动画效果

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        div{
            background-color: magenta;
            /*transition: background-color 1s linear;*/
            width: 100px;
            color: black;
            transition: transform 1s linear,width 1s linear,color 1s linear;
        }
        div:hover{
            width: 200px;
            color: blanchedalmond;
            background-color: aqua;
            transform:rotate(180deg);
        }
    </style>
</head>
<body>
    <div>动画效果transtion</div>
</body>
</html>

6.2 Animations更复杂的动画效果

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        div{
            background-color: red;
        }
        @-webkit-keyframes mycolor {
            /*使用这种方式可以定位更多的动画方式*/
            0%{
                background-color: red;
            }
            40%{
                background-color: yellow;
            }
            70%{
                background-color: aqua;
            }
            100%{
                background-color: red;
            }
        }
        div:hover{
            -webkit-animation: mycolor 5s linear;
        }
    </style>
</head>
<body>
    <div>示例文字</div>
</body>
</html>

6.3 实现动画的方法
linear ：匀速变化
ease-in ：由慢到快
ease-out ：由快到慢
ease与ease-in-out：由慢到快再到慢的效果

叔叔有糖吃

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
1
评论
CSS3基础知识学习总结笔记

1.CSS3选择器详解1.1 属性选择器：<!DOCTYPE html><html><head lang="en"> <meta charset="UTF-8"> <title></title> <style> [id*="div"]{ color: aqua; } [id^="div"]{
复制链接

扫一扫