CSS3基础知识学习总结笔记

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：

  1. border-box：内边距，边框和内容都会有效果
  2. padding-box：只有内边距和内容有背景效果
  3. 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：由慢到快再到慢的效果

时间： 2024-10-15 04:47:25

CSS3基础知识学习总结笔记的相关文章

ARM基础知识学习笔记

/*****************数电知识*******************/ PN结(Positive-Negative) 三极管:BJT(双极结型三极管Bipolar Junction Transistor)               FET(场效应管Field Effect Transistor)          (单极结型) 1.MOSFET (金属氧化物半导体Metal Oxide Semiconductor FET)               2.JFET(结型Junct

C++基础知识学习笔记

基本语法 C面向过程思想:程序=(数据结构)+(算法) 数据结构与算法分离,以算法(函数)为主. C++面向对象思想:程序=(数据结构+算法) 数据结构(属性)与算法(操作)绑成一个类,定义一个个对象对象=(数据结构+算法)  ,程序=(对象+对象+对象+--) 面向对象程序设计的程序员有两类:1.面向对象应用程序设计2.类库的设计 头文件:类的声明            ---类的外部接口       (成员函数在类声明中实现时,一般很简短,默认为内联函数)源文件:类的成员函数定义     -

计算机基础知识学习

第一周学习 一.知识方面,总得来说,就是学习计算机基础知识. 1.从计算机的发展,应用,组成,网络等方面了解: 2.对计算机操作系统的学习:常用的操作系统,操作系统的功能.分类: 3.办公软件的学习:Word\Excel\ppt,像Word中编号格式.自动生成目录,Excel中条件格式的应用,图表插入,以及各种基础函数的使用: =SUM(Eoo*$E$3,Foo*$F$3,Goo*$G$3)  表示:用E\F\G列的各数与E3\F3\G3相乘后求和,count(if)\a 计数函数, =COUN

C#基础知识篇---------C#笔记

   一．变量         1.什么叫做变量?            我们把值可以改变的量叫做变量.          2.变量的声明:            语法:[访问修饰符] 数据类型 变量名; 如: int number=10://声明了一个整型的变量number.            注意:一次声明多个变量之间要用逗号分隔.                  如:int number1,number2,number3....;          3.变量的赋值:        

CSS3 基础知识

CSS3 基础知识1.边框    1.1 圆角  border-radius:5px 0 0 5px;    1.2 阴影  box-shadow:2px 3px 4px 5px rgba(0,0,0,0.5);(水平.垂直.模糊.扩展)             box-shadow:inset 1px 2px 3px 4px #fff;(inset 内阴影)    1.3 边框图像 border-image2.背景    2.1 background-size background-size:

linux基础知识学习-linux架构

硬盘分区: 第一扇区(512bytes): MSR:master boot record (446bytes)主引导分区 partion table:(64bytes)分区表,四个.可以是主分区(primary)或者扩展分区(Extended), 每个表指向磁盘某段区间.最多只有一个扩展分区,扩展分区里面可以扩展多个逻辑分区.其余扇区(柱面(cylinder)):实际存储的地方 linux 中(\etc/fstab):IDE  总线形式不同 (a~d)/dev/hda SATA,SCSI,USB

Bash编程基础知识学习第一节

Bash编程基础知识学习 一.bash的由来 1 .什么是Bash 什么是Shell Bash 是GNU Bourne-Again SHell,是目前大多数Linux发行版采用的Shell. Shell 是*nix提供给用户使用的界面.一个操作系统的底层是独立运行的, 用户界面和底层分开,可以最大限度的保证系统稳定.Shell就是一个特殊的程序,负责接受用户的命令,并把系统的响应返回给用户. Bash Shell 一般不需要自己安装,在安装发行版的同时都会安装好. Shell的存在是和登陆相关的

html5 +css3 第一章学习和笔记

各位同学.身为本版的斑竹.,希望各位童鞋都能学到Html5 .特此没两天更新一个学习笔记和大家一起学习Html5.... 语法改变       1.新增的元素和废除的元素       2.新增的属性和废除的属性       3.全局属性 html5和4的区别:DOCTYPE.声明.内容类型.字符的编码的制定方法.元素标记的省略.布尔值的类型.引号的省略 一:html5中的标记方法        1内容类型:.html  .htm        2DOCTYPE声明: <!DOCTYPE html

(转)Linux基础知识学习

Linux基础知识学习 原文:http://blog.csdn.net/ye_wei_yang/article/details/52777499 一.Linux的磁盘分区及目录 Linux的配置是通过修改配置文件来完成. 1.1.Linux磁盘分区 Linux可以将磁盘分为多个分区,每个分区可以被当做一个独立的磁盘使用,磁盘类型:主分区.扩展分区.逻辑分区. 主分区标记为活动,用于操作系统的引导,一块磁盘最多划分4个主分区,主分区存放操作系统的文件或用户数据. 扩展分区:主分区小于4个时才可以划