py---web学习笔记03(CSS)

一、上堂回顾

1.网页开发的知识
​
    组成:结构,表现,行为
​
    实现:html,css,javascript
​
2.html简介
​
    超文本标记语言
​
    规范:标签组成
​
    操作思想:封装
​
3.html中常用的标签
​
    font:设置字体,size   color
    p:设置段落
    h:标题,注意:数字 越大,字号越小
    hr:水平线
    br:换行
    特殊字符:    <   >
    img: src  width  height alt title
        相对路径:../
    块标签:pre div  span
    列表标签:有序【ol】  无序【ul】   li
    表格标签:table   tr   td【th】
        合并单元格:colspan   rowspan
    a:超链接标签,href target
        定位资源:#top   #id
    音视频标签:audio     video  :controls   loop autoplay
    表单标签:form input   select   textarea
        属性:type:text,password,file,radio,checkbox,button,submit,reset
        value:
        name
        id
        class
        checked
        selected
    头标签:head
     link

css

1.概念
    层叠样式表
    意义:为了将结构和表现分离,为了代码的维护性和可读性
2.css的选择器
    
3.css和html的结合方式
    内嵌样式和链接样式
    行内样式和导入样式:了解

二、css的属性

1.字体属性

font-family:字体类型,比如宋体,黑体等

font-style:字体样式【是否倾斜】

​ normal:正常

​ italic:意大利体

​ oblique:斜体

font-weight:设置字体的粗细,取值范围为100~900,数值越大,字体越粗

​ normal:正常

​ bold:粗体

​ bolder:

​ lighter

font-size:字体大小,一般情况下,使用px为单位,默认大小为16px

代码演示:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title></title>
        <style>
            p{
                /*注意:可以同时设置多种字体,浏览器在访问者的计算机中查找宋体,
                 * 如果查找到,则直接显示,如果查找不到,则去查找后面的字体
                 * 如果列出来的字体在访问者的计算中都不存在,则显示默认字体
                 * */
                font-family: 宋体,微软雅黑,Arial;
                
                font-style: oblique;
                /*
                 * italic:只是一种字体风格,意大利体,对每个字符得到结构做了一些微小的改动,来反映外观的变化
                 * oblique:将正常文本倾斜一定的角度,一般给英文设置倾斜
                 */
                
                
                /*font-weight: 900;*/
                font-weight: lighter;
                
                
                /*font-size: 30px;*/
                font-size: 2em;
                /*
                 * px:表示像素,与分辨率有关,表达字体大小,缩放的时候不建议使用
                 * em:自动适应尺寸,方便字体的放大或者缩小,用于段落缩进
                 * 1em = 16px
                 */
            }
        </style>
    </head>
    <body>
        <p>字体属性</p>
    </body>
</html>

2.文本属性

text-decoration:设置文字的装饰效果

​ none:正常

​ underline:下划线

​ line-through:给文字添加删除线

​ overline:添加顶线

​ blink:闪烁,仅部分浏览器支持

text-indent:段落缩进,中文中常用2em【常用】

text-align:对齐方式【常用】

​ left:局左对齐

​ right

​ center:居中对齐【常用】

​ justify:两端对齐

letter-spacing:字符之间的间距

word-spacing:单词之间的间距

text-transform:变化,侧重于大小写转换

​ none:正常显示

​ capitalize:单词首字母大写

​ uppercase:将小写转化为大写

​ lowercase:将大写转化为小写

direction:文本方向

​ ltr:文本方向为从左到右,默认方向

​ rtl:文本方向为从右到左

代码演示:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style>
            p{
                /*注意:可以同时给一段文本设置多个装饰效果,使用空格隔开*/
                /*text-decoration: underline overline line-through;*/
                
                /*注意:后出现的属性会覆盖先出现的属性*/
                text-decoration: underline;
                
                text-indent: 2em;
                
                /*text-align: center;*/
                
                /*使用px作为单位*/
                /*字符*/
                letter-spacing: 10px;  
                /*单词,通过空格区分单词*/
                word-spacing: 20px;
                
                text-transform: uppercase;
                
                direction: rtl;
            }
        </style>
    </head>
    <body>
        <p>文本属性css html</p>
    </body>
</html>

3.盒子属性

在进行页面布局之前,将数据封装到一块一块的区域中,常用div

说明:所有的html的标签都能使用盒子属性

3.1边框属性

border:边框,统一设置指定标签的所有的边框,参数:边框宽度 边框样式 边框颜色

border-top: 上

border-bottom:下

border-left:左

border-right:右

border-width:边框的宽度,单位使用px

border-style:边框的样式

​ dotted:点画线

​ dashed:虚线

​ solid:实线

​ double:双线

border-color:边框颜色

border-radius:边框削圆角【注意:一般使用百分比表示,百分比越大,表示圆角越大】【常用】

​ 50%:将正方形削圆角,取值为50%的时候,表示得到一个圆

总结:

border-width,border-color,border-style分别给出1个,2个,3个或者4个属性值的时候,分别代表的含义

​ 1个:上下左右

​ 2个:前者代表上下,后者代表的是左右

​ 3个:前者代表上,中间代表左右,后者代表的下

​ 4个:分别代表上右下左

代码演示:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style>
            div{
                width: 200px;
                height: 100px;
                
                /*统一设置
                 参数可以不按照特定的顺序*/
                 
                /*border: 2px dashed blue;*/
            }
            
            #div2{
                /*个别设置:只设置指定的边框*/
                border-right: 2px solid red;
            }
            
            #div3{
                /*统一设置*/
                border-width: 3px;
                border-color: purple;
                border-style: dotted;
            }
            
            #div4{
                border-width: 2px;
                border-color: red green cyan purple;
                border-style: solid;
            }
​
            
        </style>
    </head>
    <body>
        <div>AAAAAA</div>
        <div id="div2">BBBBB</div>
        <div id="div3">CCCCC</div>
        <div id="div4">DDDDDD</div>
    </body>
</html>

3.2内边距

padding;内边距,参数为距离,单位为px

​ padding-left

​ padding-right

​ padding-top

​ padding-bottom

说明:可以统一设置指定标签的上下左右的内边距,也可以单独设置

代码演示:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style>
            div{
                width: 200px;
                height: 100px;
                
                /*统一设置
                 参数可以不按照特定的顺序*/
                 
                border: 2px dashed blue;
            }
            
            #div2{
                /*统一设置内边距*/
                /*注意:设置了内边距,相当于将该标签的宽和高改变*/
                padding: 30px;
            }
            
            #div3{
                /*单独设置*/
                padding-left: 30px;
                padding-bottom: 30px;
            }
​
        </style>
    </head>
    <body>
        <div>AAAAAA</div>
        <div id="div2">BBBBB</div>
        <div id="div3">CCCCC</div>
    </body>
</html>

3.3外边距

margin:外边距,参数为距离,单位为px

​ margin-left

​ margin-right

​ margin-top

​ margin-bottom

说明:可以统一设置指定标签的上下左右的外边距,也可以单独设置

代码演示:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style>
            div{
                width: 200px;
                height: 100px;
                
                /*统一设置
                 参数可以不按照特定的顺序*/
                 
                border: 2px dashed blue;
            }
            
            #div2{
                /*统一设置外边距*/
                /*注意:外边距的参照物:页面,相邻的其他标签*/
                margin: 30px;
            }
            
            #div3{
                /*单独设置*/
                margin-top: 50px;
            }
​
        </style>
    </head>
    <body>
        <div>AAAAAA</div>
        <div id="div2">BBBBB</div>
        <div id="div3">CCCCC</div>
    </body>
</html>

3.4其他写法

代码演示:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style>
            img{
                width: 400px;
                height: 400px;
                /*border-radius: 50%;*/
                
                border-left-color: purple;
                border-left-width: 2px;
                border-left-style: solid;
                border-right-style: dotted;
            }
        </style>
    </head>
    <body>
        <img src="img/pic20.jpg" />
    </body>
</html>

4.尺寸属性

width:宽度

height:高度

line-height:行高

注意:当文本内容只有一行的时候,将行高设置为和height相等,【line-height = height】,就可以实现文字在垂直方向上居中显示

text-align:center,在水平方向上居中显示

代码演示:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style>
            .box{
                width: 200px;
                height: 100px;
                border: 1px black solid;
                
                /*设置文字真正意义上的居中显示:水平方向和垂直方向*/
                line-height: 100px;
                text-align: center;
            }
        </style>
    </head>
    <body>
        <div class="box">
            尺寸属性this is a text
        </div>
    </body>
</html>

5.背景属性

background;背景【颜色或者图片】

background-color:背景颜色

background-image:背景图片

background-repeat:背景样式平铺样式

​ repeat:沿着水平和垂直方向平铺,默认值

​ no-repeat;不平铺

​ repeat-x:沿着水平方向平铺

​ repeat-y:沿着垂直方向平铺

background-position:背景图像的位置

​ left

​ right

​ top

​ bottom

​ center

background-attachment;设置背景图片是否随着网页内容一起滚动

​ scroll:会随着滚动,默认值

​ fixed:固定,不随着滚动

代码演示:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style>
            body{
                width: 100%;
                height: 5000px;
                
                
                /*背景颜色*/
                /*注意:给任何的标签都可以设置背景颜色*/
                /*background-color: red;*/
                
                /*背景图片
                 
                 * 图片尺寸 = 背景的大小,整体放下
                 * 图片尺寸 < 背景的大小,默认平铺
                 * 图片尺寸 > 背景的大,只显示背景的大小
                 * */
                /*background-image: url(img/pic20.jpg);*/
                
                /*是否允许平铺*/
                /*background-repeat: no-repeat;*/
                
                
                /*设置背景图的位置
                 *水平方向:left center right
                 * 垂直方向:top center bottom
                 * 数值可以自定义
                 * */
                /*参数:左右   上下,类似于坐标系中的点*/
                /*background-position: 50% 50px;*/
                
                
                /*设置背景图是否随着网页内容滚动*/
                /*background-attachment: fixed;*/
                
                
                
                /*设置颜色的渐变
                 * background:linear-gradient()
                 */
                /*从左到右的线性渐变*/
                /*background:linear-gradient(to right,red,blue);*/
                /*从上到下的线性渐变*/
                /*background:linear-gradient(red,blue);*/
                /*从左上角到右下角的线性渐变*/
                background:linear-gradient(to right bottom,red,blue);
                
            }
        </style>
    </head>
    <body>
        
    </body>
</html>

6.和列表相关的属性

list-style:设置列表的项目符号和位置

list-style-image:设置列表的项目符号

list-style-position:设置项目符号的位置

​ inside:里面

​ outside:外面

7.浮动属性

div是块级元素,特点:在页面中独占一行【会自动换行】,当一个html页面中有多个div的时候,默认从上往下依次排列,这种排列方式被称为流

元素浮动之前,被称为元素处于标准流中,是竖向排列的,浮动之后,可以将元素的排列方式改为横向排列

float:实现标签的浮动

​ none:默认值,不浮动

​ left:向左浮动

​ right:向右浮动

clear: 清除浮动,取值一般为left或者right,表示将原来的浮动清除掉,避免影响后面标签的位置

代码演示:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style>
            #div1{
                width: 300px;
                height: 300px;
                background-color: red;
                float: right;
            }
            #div2{
                width: 200px;
                height: 200px;
                background-color: blue;
                float: right;
            }
            #div3{
                width: 400px;
                height:400px;
                background-color: orange;
                float: right;
            }
        </style>
    </head>
    <body>
        <div id="div1">111</div>
        <div id="div2">222</div>
        <div id="div3">333</div>
    </body>
</html>
<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style>
            li{
                float: left;
            }
        </style>
    </head>
    <body>
        <ul>
            <li>1</li>
            <li>2</li>
            <li>3</li>
            <li>4</li>
        </ul>
    </body>
</html>

8.显示属性

display:标签的显示状态

​ none:隐藏,特点:不会占据空间,常用来进行页面的重绘或者重排

​ block:块级标签

​ 特点:总是以一个块的形式表现出来,可以独占一行

​ 可以设置宽高以及内外边距,如果不设置,默认宽度和父标签相等

​ 高度会随着文本内容的变化而变化【自适应】

​ 例如:div p li hn

​ inline:行内标签

​ 特点:不会自动换行,宽高随着内容自适应,设置宽高和内外边距无效

​ 设置这个值,就可以将一个块级标签转换为行内标签,那么该标签将不能设置宽高和内外边距

​ 例如:span a

​ inline-block:行内块级标签

​ 特点:不但具有block的特点:可以设置宽高和内外边距

​ 也具有inline的特点:不换行

​ 使用场景:导航的实现【浮动,目的是将竖向排列转换为横向排列】

代码演示:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style>
            *{
                padding: 0px;
                margin: 0px;
                list-style: none;
            }
            ul li{
                float: left;
            }
            a{
                /*将a标签从行内标签转换为块级标签:就可以设置宽高和内外边距*/
                display: block;
                width: 30px;
                height: 30px;
                background-color: orange;
                text-decoration: none;
                text-align: center;
                line-height: 30px;
            }
        </style>
    </head>
    <body>
        <ul>
            <li><a href="">1</a></li>
            <li><a href="">2</a></li>
            <li><a href="">3</a></li>
            <li><a href="">4</a></li>
            <li><a href="">5</a></li>
        </ul>
    </body>
</html>
<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style>
            ul,li,a,*{
                padding: 0;
                margin: 0;
                list-style: none;
                text-decoration: none;
            }
            
            li{
                display: inline-block;
                border: 1px solid red;
                /*float: left;*/
            }
            
        </style>
        
    </head>
    <body>
        <ul>
            <li><a href="">1</a></li><li><a href="">2</a></li><li><a href="">3</a></li><li><a href="">4</a></li><li><a href="">5</a></li>
        </ul>
    </body>
</html>
​
<!--
    问题:将所有标签的内外边距设置为了0,但是最终显示li之间有间距,间距从哪来?
    原因:实际上,这是inline造成的,这些间距是空白符,在浏览器中,空白符不会被忽略的【换行造成的空白符】
-->

9.定位属性

9.1绝对定位

position

​ absolute:绝对定位,将对象从文档流中拖出

​ 参照物:父标签或者先辈标签【如果该标签的父标签设置了有效的定位,就以父标签作为参照物,如果没有设置有效定位,则查找所有的先辈标签】

​ 注意:可以使用left,top,right和bottom属性设置标签的位置

代码演示:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style>
            /*absolute:参照物是父标签*/
            body{
                height: 9999px;
                background-color:red;
            }
            
            .pos1{
                position: absolute;
                left: 100px;
                top: 150px;
            }
        </style>
    </head>
    <body>
        <h2 class="pos1">标题yi</h2>
    </body>
</html>
​

9.2相对定位

​ relative:相对定位,不会脱离文档流

​ 参照物:该标签自身原来的位置

​ 注意:可以使用left,top,right和bottom属性设置标签的位置

代码演示:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style>
            /*relative:参照自身原来的位置*/
            .pos1{
                position: relative;
                left: -20px;
            }
            .pos2{
                position: relative;
                left: 20px;
            }
        </style>
    </head>
    <body>
        <h2>标题</h2>
        <h2 class="pos1">标题yi</h2>
        <h2 class="pos2">标题er</h2>
    </body>
</html>
​

9.3固定定位

​ fixed:固定定位,脱离文档流

​ 参照物:窗体

​ 使用场景:应用在广告中

注意:有效的定位可以设置距离参照物上下左右的位置,如果在参照物的内部,这些属性值是正数,一旦出界就是负数

代码演示:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style>
            body{
                height: 9999px;
                background-color:red;
            }
            .one{
                position: fixed;
                left: 15px;
                top: 50px;
            }
            .two{
                position: fixed;
                right: 30px;
                top: 50px;
                
            }
        </style>
    </head>
    <body>
        <p class="one">
            hello
        </p>
        <p class="two">
            文本
        </p>
    </body>
</html>

9.4z-index的使用

代码演示:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style>
            .x{
                position: absolute;
                left: 0px;
                top: 0px;
                /*设置了图片的绝对定位之后,则img会覆盖h*/
                
                
                z-index: 1;
                
                /*
                 * 使用前提:该标签设置了定位属性
                 * z-index的作用:值决定标签显示的位置【标签层叠的时候】
                 * 此属性的值越大,则表示优先级越高,则被显示在最上层
                 * z-index默认的值为0,将z-index设置为-1.表示该标签拥有更低的优先级
                 */
                
            }
        </style>
    </head>
    <body>
        <h1>标题</h1>
        <img class="x" src="img/pic20.jpg" />
    </body>
</html>

10.综合练习-百度首页

baidu.css

*{
    /*去除默认的内外边距*/
    padding: 0;
    margin: 0;
}
​
/*设置上面*/
#head{
    /*向右浮动*/
    float: right;
    margin-top:10px;
}
/*设置上面的超链接*/
.headlink{
    color: black;
    font-size: 12px;
    margin: 10px;
}
/*更多产品*/
.more{
    
    background-color: blue;
    color: white;
    text-decoration: none;
    margin-right: 10px;
    font-size: 14px;
    text-align: center;
    /*line-height: ;*/
}
​
/*中间*/
#middle{
    /*清除浮动*/
    clear: right;
    
    text-align: center;
    
    /*中间的div以body为参照物*/
    position: absolute;
    top: 80px;
    
    /*设置宽度*/
    width: 100%;
}
/*输入框的样式*/
#key{
    width: 30%;
    height: 30px;
}
/*按钮*/
#btn{
    width: 70px;
    height: 30px;
    background-color: blue;
    color: white;
}
​
/*底部*/
#footer{
    position: absolute;
    bottom: 10px;
    
    width: 100%;
    height: 150px;
    
    text-align: center;
}
​
/*底部超链接*/
#footlink{
    margin: 20px;
    
}
​
#footlink a{
    color: gray;
    font-size: 12px;
}

baiduhome.html

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <!--引入css文件-->
        <link href="css/baidu.css" type="text/css" rel="stylesheet" />
    </head>
    <body>
        <!--上面-->
        <div id="head">
            <a class="headlink" href="#">新闻</a>
            <a class="headlink" href="#">好123</a>
            <a class="headlink" href="#">地图</a>
            <a class="headlink" href="#">地图</a>
            <a class="headlink" href="#">地图</a>
            <a class="headlink" href="#">地图</a>
            <a class="headlink" href="#">地图</a>
            <a class="headlink" href="#">地图</a>
            <a class="more" href="#">更多产品</a>
        </div>
        
        
        <!--中间-->
        <div id="middle">
            <img src="https://www.baidu.com/img/bd_logo1.png" />
            <div id="sub">
                <form action="#" method="get">
                    <input type="text" name="kw" id="key" />
                    <button id="btn">百度一下</button>
                </form>
            </div>
        </div>
        
        
        <!--下面-->
        <div id="footer">
            <div>
                <img src="img/二维码.png" />
                <p>手机百度</p>
            </div>
            
            <div id="footlink">
                <a href="#">地图</a>
                <a href="#">地图</a>
                <a href="#">地图</a>
                <a href="#">地图</a>
                <br />
                <a href="#">地图</a>
                <a href="#">地图</a>
                <a href="#">地图</a>
            </div>
        </div>
        
    </body>
</html>

 

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值