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

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>

效果如下所示

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>

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

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>

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>

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>

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>

时间： 2024-10-26 13:46:52

35、重新复习html与css（1）的相关文章

第一周复习二 （CSS样式表及其属性）

样式表三种写法 1内联写法:style直接写在标签内.个人感觉多用于个别标签,一般情况优先级较高 style="font-size:16px;" 2内嵌写法:写在<head></head>标签内.个人感觉多用于较多或通用的一类标签,用来减少工作量 <style type="text/css"> {} </style> 分为三种: 标签选择器 <style type="text/css">

【复习笔记】CSS基础

外观 color:rgba(255,255,255,1),a表示alpha,透明度值0~1 font-family:字体1,字体2,字体3;确保某字体不存在时自动选择下一个,最好使用字体的英文名称保证浏览器识别 background-position,单独left或right(或使用指定偏移像素px)默认带center属性 text-indent首行缩进量基于父元素宽度 letter-spacing表示字之间的间距,word-spacing表示单词(英文)之间的间距 direction会文本书写

36、重新复习html和css之二

(1)由于公司是意大利的网段, (2)而且公司的电脑是保密的, (3)文件发不出去, (4)U盘插不进去. (5)而且我们组的项目整体上已经开发完毕,客户暂时没有什么大的需求, 所以如果我不把这些技术知识发到网上,每天闲着没事的时候看一看,感觉整个人就费了 第一个Hello World <html> <head> <title>hello world~</title> </head> <body> hello world!<br

前端知识复习一（css）

1.清楚浮动 父盒子高度为0,子盒子全部定位.浮动.子盒子不会撑开父盒子,下面的盒子会顶上来 清楚方法: clear:both: overflow:hidden: 加空标签 单/双 //双标签 .clearfix:berore , .clearfix:after { content:"."; didsplay:table; } .fixclear:after{ clear:both; } .fixclear{ *zoom:1; } //单标签 .fixclear:after{ cont

用html+css写一下个人简历

今天练习一下页面布局,就用自己的个人简历来练手.下面是html部分: 1 <body> 2 <div class="content"> 3 <div class="head"> 4 <h1>web前端业务个人简历</h1> 5 </div> 6 7 <div class="essentialInformation"> 8 <div class="b

使用Ant和YUICompressor链接合并压缩你的JS和CSS代码

JS代码和CSS代码在上线前要压缩大家应该都是知道的了.记得之前做项目的时候,最后要交差的时候是找了个网站,将JS代码的文件一个一个地复制,粘贴,复制,粘贴. 当时就在想:TMD有没有好一点的方法,劳资不想老是用Ctrl大法.啊啊啊啊啊啊啊啊阿~.最最坑爹的是,有时候将代码复制粘贴的时候手一抖可能就删了点什么东西,手一快又保存了,反正各种坑爹.坑到没朋友. 但是呢,不压缩也不是是吧? 在写JS代码渐渐多了起来的时候就发现手动压缩根本不是长远的方法.而且JS的代码也开始分块,分功能,分文件写了,尽

代码：CSS仿制 苹果按钮图标

首先,先复习一下:CSS的线性渐变.径向渐变 .linear{ background-image:-webkit-linear-gradient(90deg,#f8f8f8 20%,#dae9fa 90% ,#a6caf0 100%); background-image:-moz-linear-gradient(90deg,#f8f8f8 20%,#dae9fa 90% ,#a6caf0 100%); background-image:-o-linear-gradient(90deg,#f8f8

前端开发：CSS 初级和高级指南

CSS 初级和高级指南: 没有就不能活的 53 个 CSS 技术 对新手实用的 20 个 CSS 建议 快速编写更好 CSS 代码的 5 种方法 50+ 个 CSS 创意案例和教程 101 个 CSS 小贴士.教程和范例 CSS 代码片段:15 个邪恶的技巧 15 个必学的 CSS 技巧 8 个 CSS 链接 链接小贴士 8 个超简洁 CSS 小贴士 为更好的 CSS 代码:70 个专家级点子 30+ CSS 速查表和快速指南 CSS 大师的 10 个原则 10 个优秀的 CSS 教程和技巧 5

在html5中不支持&lt;table&gt;的cellpadding 和 cellspacing ; 2) 如何用css实现 cellpadding, cellspacing ; 3) tr , th 是 有 border, 没有 padding 的.

1.初始: 1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>cellspacing的css实现</title> 6 <style type="text/css"> 7 8 table { 9 border: 1px solid red; 10 } 11