review0424-1


<!DOCTYPE html>
<html>
<head>
    <title>review0424-1</title>
    <meta charset="utf-8">
    <style type="text/css">
        p{
            background-color: red;
            font-size: 20px;
            font-family: \6807\6977\4F53 ；
            /*我的电脑无法显示隶书*/
        }
        div{
            background-color: pink;
            font-size: 100px;
        }
        .p1{
            font-size: 40px;
            /*可以覆盖上面的font-size*/
        }
        body{
            background-color: yellow;
            /*颜色作为背景颜色*/
            background-image: url("image/4.jpg");
            /*图片作为背景图片*/
            background-repeat: no-repeat;
            /*背景图片的重复方向*/
            /*repeat repeat-x repeat-y no-repeat*/
            background-attachment: fixed;
            /*背景是否随着滚动条滚动*/
            /*Fixed 文字滚动，背景图片不随着滚动*/
            /*scroll 背景图片随着文字一起滚动*/
            background-position: 50% 50%;
            /*背景图片的起始位置*/
            /*以上五个属性可以统一设置 如下*/
            /*background:yellow url("image/4.jpg") no-repeat fixed 30px 40px;*/
        }
    </style>
</head>
<body>
    <!-- CSS概念 -->
    <!-- Cascading   Style   Sheets -->
    <!-- 层叠          样式     列表 -->
    <!-- CSS作用 -->
    <!-- 1、结构与样式分离的方式，便于后期的维护和修改 -->
    <!-- 2、可以用多套样式，使网页有任意样式切换的效果 -->
    <!-- 3、使得页面载入的更快，降低服务器的成本 -->
    <!-- 第一个样式：内部样式 -->
    <p>https://www.dodoke.com</p>
    <p class="p1">这是渡课官网</p>
    <div>类使用class定义，但是类名不准中文，不准数字</div>
    <!-- CSS选择器 -->
    <!-- 概念：用来选择(找到)需要添加样式的标签或者位置 -->
    <!-- 常用选择器：标签选择器、（归）类选择器、其他选择器 -->
</body>
</html>

review0424-2


<!DOCTYPE html>
<html>
<head>
    <title>review0424-2</title>
    <meta charset="utf-8">
    <!-- 这是外部样式 一般都使用外部样式 -->
    <link rel="stylesheet" type="text/css" href="review0424-2.css">
    <!-- 1、link:用于定义文档与外部资源的关系 -->
    <!-- 2、rel="stylesheet"：rel是relationship的英文缩写 -- 关系 -->
    <!-- 3、type="text/css":定义css样式文件的类型 -->
    <!-- 4、href="index.css"：引用具体的文件 -->
</head>
<body>
    <p>https://www.dodoke.com</p>
    <p class="p1">这是渡课官网 review0424-2</p>
    <p class="p2">
        层叠样式表(英文全称：Cascading Style Sheets)是一种用来表现HTML（标准通用标记语言的一个应用）或XML（标准通用标记语言的一个子集）等文件样式的计算机语言。CSS不仅可以静态地修饰网页，还可以配合各种脚本语言动态地对网页各元素进行格式化。CSS 能够对网页中元素位置的排版进行像素级精确控制，支持几乎所有的字体字号样式，拥有对网页对象和模型样式编辑的能力。
    </p>
</body>
</html>

p{
    /*文本样式：对齐方式、文本修饰、文本转换、文本缩进*/
    /*作用：美化，修饰页面的文字相关的部分内容*/
    /*background-color: blue;*/
    color: rgb(0,255,0);
    /*颜色设置 color  单词、16进制、rgb*/
    /*lightgreen 英文单词*/
    /*#000000 十六进制数字*/
    /*rgb（x,x,x）*/
    direction: rtl;
    /*文本的方向，书写的方向*/
    /*ltr rtl*/
    letter-spacing: 30px;
    /*字符间距 间距可以是负数*/
    line-height: 60px;
    /*行高 行间距*/
    text-align: right;
    /*对齐方式*/
    /*direction:ltr*/
    /*text-align:justify*/
    /*1、如果是字母和汉字的话，两者效果一样；*/
    /*2、主要针对阿拉伯数字，两者不一样；*/
    /*3、对于direction来说：对于数字改变书写顺序，对于小数点显示也不一样*/
    text-decoration: underline;
    /*文本修饰*/
    /*none underline overline line-through*/
    text-shadow: 5px 5px 5px red;
    /*阴影效果有四个属性：行坐标，列坐标，阴影模糊程度，阴影的颜色显示*/
    text-transform: capitalize;
    /*改变字母大小写*/
    /*none capitalize uppercase lowercase*/
    text-indent: 2em;
    /*首行缩进两个字符*/
    /*或者可以用px*/
    /*文本样式小结：*/
    /*1.用对于间距，位置，对齐方式等设置*/
    /*2.用对于文本进行修饰：阴影、下划线等*/
}
.p1{
    font-size: 40px;
    background-color: pink;
}

review0424-3

<!DOCTYPE html>
<html>
<head>
    <title>review0424-3</title>
    <meta charset="utf-8">
    <!-- 这是行内样式 -->
</head>
<body>
    <p style="background-color: green; font-size: 50px;">https://www.baidu.com</p>
    <p style="background: red;">这是百度官网</p>
</body>
</html>

review0426

<!DOCTYPE html>
<html>
<head>
    <title>review0426</title>
    <meta charset="utf-8">
    <link rel="stylesheet" type="text/css" href="review0426.css">
</head>
<body>
    <p>https://www.dodoke.com</p>
    <p class="p1" id="name1">这是渡课官网 review0426-1</p>
    <p class="p1" id="name2">这是渡课官网 review0426-2</p>
    <p class="p2">
        层叠样式表(英文全称：Cascading Style Sheets)是一种用来表现HTML（标准通用标记语言的一个应用）或XML（标准通用标记语言的一个子集）等文件样式的计算机语言。CSS不仅可以静态地修饰网页，还可以配合各种脚本语言动态地对网页各元素进行格式化。CSS 能够对网页中元素位置的排版进行像素级精确控制，支持几乎所有的字体字号样式，拥有对网页对象和模型样式编辑的能力。
    </p>

    <hr>
    <ul>
        <li>aaaaaa</li>
        <li>bbbbbb</li>
        <li>cccccc</li>
        <li>dddddd</li>
    </ul>
    <ol>
        <li>aaaaaa</li>
        <li>bbbbbb</li>
        <li>cccccc</li>
        <li>dddddd</li>
    </ol>

    <hr>
    <a href="#">伪类</a>
    <label>对比</label>
    <input type="text" name="">

    <hr>
    <h6>https://www.dodoke.com</h6>
    <h6>渡课网1</h6>
    <h6>渡课网2</h6>
    <table border="1" width="500px">
        <tr>
            <td>1</td>
            <td>2</td>
            <td>3</td>
            <td>4</td>
        </tr>
        <tr>
            <td>1</td>
            <td>2</td>
            <td>3</td>
            <td>4</td>
        </tr>
        <tr>
            <td>1</td>
            <td>2</td>
            <td>3</td>
            <td>4</td>
        </tr>
    </table>

    <hr>
    <p>div up</p>
    <div id="div1">
        <div id="div2">
            <p>https://www.dodoke.com</p>
        </div>
        <div id="div3">
            <p class="p3" id="name3">dodoke1</p>
            <p class="p3" id="name4">dodoke2</p>
        </div>
        <h1>hello dodoke</h1>
        <p>
            hello dodoke! hello dodoke! hello dodoke! hello dodoke! hello dodoke! hello dodoke! hello dodoke! hello dodoke! hello dodoke! hello dodoke! hello dodoke! hello dodoke! hello dodoke! hello dodoke! hello dodoke! hello dodoke! hello dodoke! hello dodoke! hello dodoke! hello dodoke! 
        </p>
    </div>
    <p>div down</p>
</body>
</html>

p{
    letter-spacing: 10px;
    line-height: 50px;
    text-align: justify;
    /*text-decoration: line-through;*/
    /*text-shadow: 5px 5px 5px red;*/
    /*阴影效果有4个属性：行坐标，列坐标，阴影模糊程度，阴影颜色显示*/
    text-transform: uppercase;
    text-indent: 40px;
    font-style: italic;
    /*normal默认的正常显示*/
    /*italic斜体-绝大多数斜体，个别不斜体的效果*/
    /*oblique所有都实现斜体效果*/
    font-weight: bold;
    /*中间数值没有效果的，因为浏览器差异性的问题*/
    /*只有100和900有效果*/
    /*现在基本上设置：normal和bold*/
    font-size: 20px;
}

ul{
    list-style-type: circle;
    list-style-position: outside;
    list-style-image: url("imag/headLogo/arrow.gif");
}

ol{
    list-style-type: upper-roman;
}
/*列表使用频率很高，经常用于菜单，规律性应用等场景*/

a:link{
    color: red;
    /*未访问的链接*/
}

a:visited{
    color: green;
    /*已经访问过的链接*/
}

a:hover{
    color: yellow;
    font-size: 30px;
    /*鼠标悬停在链接上*/
}

a:active{
    color: blue;
    /*向被激活元素添加的样式*/
}

label:hover{
    color: red;
}

input:hover{
    background-color: red;
}

input:active{
    background-color: blue;
}

input:focus{
    background-color: yellow;
    /*选择拥有键盘输入焦点的元素*/
}

h6:first-of-type{
    background-color: red;
}

td:nth-child(2){
    background-color: red;
    /*:first-child   选择元素的第一个子元素*/
    /*:last-child   选择某个元素的最后一个子元素*/
    /*:nth-child(n)    选择某个元素的一个或者多个特定的子元素*/
    /*:nth-last-child(n)  选择某个元素的一个或者多个特定的子元素*/
    /*:first-of-type   选择一个上级元素下的第一个同类子元素*/
}

p::before{
    content: "终于快复课了，";
    /*可以在内容之前插入新的内容*/
}

h6::after{
    content: "正在进行防疫验收工作！";
    /*可以在内容之后插入新的内容*/
}

p::first-line{
    background-color: yellow;
    /*选择指定选择器的首行*/
}

p::first-letter{
    font-size: 30px;
    /*选择文本的第一个字符*/
}

p::selection{
    background-color: red;
    /*选择指定元素中被用户选中的内容*/
}

#name1{
    color: red;
}

#name2{
    color: blue;
}

*{
    font-size: 20px;
}

#name1,#name2{
    background-color: pink;
    /*逗号选择器 ,     联合选择器*/
}

p[id="name3"]{
    color: red;
    /*id  *   选择指定元素中被用户选中的内容*/
    /*[]                属性选择器*/
}

/*> 选择器         子选择器（不是子孙后代）*/
/*+ 选择器          同辈，兄弟选择器*/
.div1{
    background-color: yellow!important;
}

#div2{
    background-color: blue;
}
/*选择器的优先级*/
/*1、！important*/
/*2、行内样式*/
/*3、ID*/
/*4、类  class*/
/*5、标签*/
/*6、通配符  *  */
/*7、浏览器默认属性*/

Web 前端开发工程

CSS入门 -- 笔记

review0424-1

review0424-2

review0424-3

review0426