35、重新复习html与css（1）

2023-01-04 18:08:04

1、html与css的结合方式

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

<title>Insert title here</title>

</head>

<body>

<!--

    结合方式01:

        在标签上加入style属性.

        属性的值就是css代码.

 -->

<p style="color:red;" >itcast传智播客</p>

</body>

</html>

2、结合方式2。在页面中写style属性

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

<title>Insert title here</title>

<style type="text/css">

    p {

        color:blue;

    }

</style>

</head>

<body>

<!--

    结合方式02:

        在页面的head标签中, 书写一个style标签.

        在style标签中书写css代码.

 -->

<p>itcast传智播客</p>

<p>itcast传智播客</p>

</body>

</html>

3、结合方式3，在页面中写入link标签

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

<title>Insert title here</title>

    <link type="text/css" rel="stylesheet" href="p.css" />

</head>

<body>

<!--

    结合方式03:

        在页面head标签中填写link标签

                <link type="text/css" rel="stylesheet" href="p.css" />

                type mime类型

                rel     类型

                href css文件路径

 -->

<p>itcast传智播客</p>

<p>itcast传智播客</p>

</body>

</html>

4、标签选择器

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

<title>Insert title here</title>

<style type="text/css">

    p {

        color:red;

    }

</style>

</head>

<body>

<!--

标签选择器:

    语法:  标签名 {

        属性键:属性值;

    }

 -->

<p>itcast传智播客</p>//表示占一行

<p>itcast传智播客</p>

</body>

5、id选择器

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

<title>Insert title here</title>

<style type="text/css">

    #one {

        color:red;

    }

</style>

</head>

<body>

<!--

ID属性唯一标识符.

    要确保页面当中id属性的唯一性.

ID选择器:

    语法:  #ID {

        属性键:属性值;

    }

 -->

<p id="one" >itcast传智播客</p>

<p>itcast传智播客</p>

</body>

</html>

6、class选择器

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

<title>Insert title here</title>

<style type="text/css">

    .one {

        color:green;

    }

</style>

</head>

<body>

<!--

class属性可以随意重复.

CLASS选择器:

    语法:  .CLASS名称 {

        属性键:属性值;

    }

 -->

<p class="one" >itcast传智播客</p>

<p>itcast传智播客</p>

<p>itcast传智播客</p>

<p class="one" >itcast传智播客</p>

<h1 class="one" >itcast传智播客</h1>

</body>

</html>

7、选择器分组

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

<title>Insert title here</title>

<style type="text/css">

    .one,#two {

        color:yellow;

    }

</style>

</head>

<body>

<!-- 

选择器分组:

    语法:  选择器1,选择器2...... {

        属性键:属性值;

    }

 -->

<p class="one" >itcast传智播客</p>

<p id="two" >itcast传智播客</p>

<p>itcast传智播客</p>

<p class="one" >itcast传智播客</p>

<h1 class="one" >itcast传智播客</h1>

</body>

</html>

8、伪类选择器

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

<title>Insert title here</title>

<style type="text/css">

    a:link {

        color:red;

    }

    a:visited {

        color:green;

    }

    a:hover {

        color:blue;

    }

    a:active {

        color:yellow;

    }

</style>

</head>

<body>

<!--

    伪类选择器:指的是选择的某个标签的 某种状态

        常见状态有4种,a标签最全.

            l link  没有点击 过的状态

            v visited  访问过

            h hover  鼠标悬浮

            a active  激活状态(鼠标点下去没有弹起)

 -->

    <a href="01-结合方式01.html" >01-结合方式01.html</a>

</body>

</html>

9、css常见属性，字体

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

<title>Insert title here</title>

<style type="text/css">

    p {

    /*

        font-size: 100px;//字体大小

        font-family: 黑体;//什么字体

        font-style: italic;//是否倾斜

        font-weight: 900;//字体粗细

        font-variant: small-caps;//是否是小写型的大写字母

    */

    font :italic small-caps 900 100px 黑体;

    }

</style>

</head>

<body>

    <p>itcast传智播客</p>

</body>

</html>

效果如下所示

35、重新复习html与css（1）

10、背景属性

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

<title>Insert title here</title>

<style type="text/css">

    body {

    /*

        background-color: pink;//背景颜色

        background-image: url("001.jpg");//背景图片

        background-repeat: no-repeat;//当背景图片长度不够的时候是否重复背景图片。背景重复

        background-attachment: fixed;//背景滚动模式; 背景图片滚动属性.scroll默认值,fixed:当页面的其余部分滚动时，背景图像不会移动.inherit规定应该从父元素继承 background-attachment 属性的设置。
*/
        background : green url("001.jpg") no-repeat fixed center; 

    }

</style>

</head>

<body>

    <p>itcast传智播客</p>

    <p>itcast传智播客</p>

    <p>itcast传智播客</p>

    <p>itcast传智播客</p>

    <p>itcast传智播客</p>

    <p>itcast传智播客</p>

    <p>itcast传智播客</p>

    <p>itcast传智播客</p>

    <p>itcast传智播客</p>

    <p>itcast传智播客</p>

    <p>itcast传智播客</p>

    <p>itcast传智播客</p>

    <p>itcast传智播客</p>

    <p>itcast传智播客</p>

    <p>itcast传智播客</p>

    <p>itcast传智播客</p>

    <p>itcast传智播客</p>

    <p>itcast传智播客</p>

    <p>itcast传智播客</p>

    <p>itcast传智播客</p>

    <p>itcast传智播客</p>

    <p>itcast传智播客</p>

    <p>itcast传智播客</p>

    <p>itcast传智播客</p>

    <p>itcast传智播客</p>

    <p>itcast传智播客</p>

    <p>itcast传智播客</p>

    <p>itcast传智播客</p>

    <p>itcast传智播客</p>

    <p>itcast传智播客</p>

    <p>itcast传智播客</p>

    <p>itcast传智播客</p>

    <p>itcast传智播客</p>

    <p>itcast传智播客</p>

    <p>itcast传智播客</p>

    <p>itcast传智播客</p>

    <p>itcast传智播客</p>

    <p>itcast传智播客</p>

    <p>itcast传智播客</p>

    <p>itcast传智播客</p>

    <p>itcast传智播客</p>

    <p>itcast传智播客</p>

    <p>itcast传智播客</p>

    <p>itcast传智播客</p>

    <p>itcast传智播客</p>

    <p>itcast传智播客</p>

    <p>itcast传智播客</p>

    <p>itcast传智播客</p>

    <p>itcast传智播客</p>

    <p>itcast传智播客</p>

    <p>itcast传智播客</p>

    <p>itcast传智播客</p>

    <p>itcast传智播客</p>

    <p>itcast传智播客</p>

    <p>itcast传智播客</p>

    <p>itcast传智播客</p>

    <p>itcast传智播客</p>

    <p>itcast传智播客</p>

    <p>itcast传智播客</p>

    <p>itcast传智播客</p>

    <p>itcast传智播客</p>

    <p>itcast传智播客</p>

    <p>itcast传智播客</p>

    <p>itcast传智播客</p>

</body>

</html>

完事之后的效果是下边这个样子的

35、重新复习html与css（1）

11、盒子模型

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

<title>Insert title here</title>

<style type="text/css">

    /*

    块级标签: 占的是一行.

    行内标签: 占行内的一部分. 不能嵌套 块级标签.

    块级: div p ol

    行内: span font a

    */

</style>

</head>

<body>

    itcast传智播客<div>itcast传智播客</div>itcast传智播客 <br>

    itcast传智播客<span>itcast传智播客</span>itcast传智播客

</body>

</html>

35、重新复习html与css（1）

12、div嵌套

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

<title>Insert title here</title>

<style type="text/css">

    div{

        border-color: red;

        border-width: 1px;

        border-style: solid;

    }

    #one{

        width: 200px;

        height: 300px;

        /*

            内边距:

                注意,内边距会改变自身的宽高.

        */

        padding-left: 100px;

    }

        #two{

        width: 100px;

        height: 100px;

        /*

        外边距

        margin-left: 100px;

        */

    }

</style>

</head>

<body>

    <div id="one" >

        <div id="two" >

        </div>

    </div>

</body>

</html>

35、重新复习html与css（1）

13、内外边距的属性符合

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

<title>Insert title here</title>

<style type="text/css">

    div{

    /*

        border-color: red;

        border-width: 1px;

        border-style: solid;

        */

        border: 1px solid red;

        width: 100px;

        height: 100px;

    }

    #one{

        /*

            1个属性时: 4个方向.

            2个属性时: 第一个属性决定上下 第2个决定左右

            3个属性时: 上   左右  下

            4个属性时: 上 右 下 左(顺时针)

        */

        padding: 10px 30px 50px 80px;

    }

</style>

</head>

<body>

    <div id="one" >

        <div id="two" >

        </div>

    </div>

</body>

</html>

35、重新复习html与css（1）

14、透明效果

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

<title>Insert title here</title>

<style type="text/css">

    div{

        border: 1px solid red;

    }

    #one{

        background-color:black;

        width: 300px;

        height: 300px;

    }

    #two{

        background-color:white;

        width: 100px;

        height: 100px;

        opacity:0.7;

    }

</style>

</head>

<body>

    <div id="one" >

        <div id="two" >

        </div>

    </div>

</body>

</html>

35、重新复习html与css（1）

上一篇：漂亮的表格样式–>使用CSS样式表控制表格样式


下一篇：Java开发桌面程序学习（10）——css样式表使用以及Button使用