工作实习培训第二天

CSS

CSS是什么

Cascading Style Sheet层叠级联样式表

CSS:表现(美化网页)

字体,颜色,边距,高度,宽度,背景图片,网页定位,网页浮动…

发展史

CSS1.0

CSS2.0 DIV(块)+CSS,HTML与CSS结构分离的思想,网页变得简单,SEO

CSS2.1 浮动,定位

CSS3.0 圆角,阴影,动画… 浏览器兼容性

CSS优势:

  1. 内容和表现分离
  2. 网页结构表现统一,可以实现复用
  3. 样式十分的丰富
  4. 建议使用独立于html的css文件
  5. 利用SEO,容易被搜索引擎收录

CSS怎么使用

3种引用方式

<!--规范 <style> 可以编写css的代码 每一个声明,最好使用分号结尾
    语法:
        选择器{
            声明1;
            声明2;
}-->
<!--优先级:就近原则(行内样式>内部样式>外部样式)-->
<link rel="stylesheet" href="../../css/day2/day2.css">

<!--行内样式,在标签元素中,编写一个style属性,编写样式即可-->
    <h1 style="color: red">一级标题</h1>

<!--内部样式-->
    <style>
        h1{
            color: green;
        }
    </style>
/*外部样式*/
h1{
    color: blue;
}

拓展:外部样式两种写法

  • 连接式:

    <!--外部样式-->
    <link rel="stylesheet" href="../../css/day2/day2.css">
    
  • 导入式:@import2.1特有

    <style>
      @import url("css/style.css");
    </style>
    

CSS选择器

作用:选择页面上的某一个或某一类元素

基本选择器

  1. 标签选择器:选择一类标签 标签{}
<style>
/*标签选择器:会选择到页面上所有的这个标签的元素*/
	h1{
		color: #a13d30;
		background: #3cbda6;
		border-radius: 24px;
	}
	p{
		font-size: 80px;
	}
</style>
<body>
    <h1>一级标题</h1>
    <h1>一级标题</h1>
    <p>段落标签</p>
</body>
  1. 类选择器 class:选择所有class属性一致的的标签,.类目{}
<style>
	/*类选择器的格式		.class的名称		好处:可以多个标签归类 是同一个class*/
	.yi{
		color: #3748ff;
	}
	.yiJi{
		color: #a24fff;
  }
</style>
  1. id选择器:全局唯一
<style>
	/*id选择器:id必须保证全局唯一
	#id名称{} 不遵循就近原则,固定的
	id选择器>class选择器>标签选择器*/
	#yi{
		color: #ff008a;
	}
	.er{
		color: #02ff00;
	}
	h1{
		color: #2d1dc1;
	}
</style>
<body>
    <h1 id="yi" >标题1</h1>
    <h1 class="er">标题2</h1>
    <h1>标题3</h1>
</body>

层次选择器

1.后代选择器:“在某个元素的后面”

<style>
	/*后代选择器*/
	body p{
		background: red;
}</style>

2.子选择器

<style>
	/*子选择器*/
	body>p{
  	background: #3cbda6;
}</style>

3.相邻兄弟选择器

<style>
	/*相邻兄弟选择器:只有一个,相邻(向下)*/
	.active+p{
	background: #a13d30;
	}
</style>

4.通用选择器

<style>
	/*通用兄弟选择器 当前选择元素的向下的所有兄弟*/
	.active~p{
	background: #02ff00;
	}
</style>
<body>
    <p>p0</p>
    <p class="active">p1</p>
    <p>p2</p>
    <p>p3</p>
    <ul>
        <li>p4</li>
        <li>p5</li>
        <li>p6</li>
    </ul>
  
</body>

结构伪类选择器

<!--避免使用. class id选择器-->
<style>
    /*ul的第一个子元素*/
    ul li:first-child{
        background: #02ff00;
    }
    /*ul的最后一子元素*/
    ul li:last-child{
        background: #ff4832;
    }
    /*选择p1:定位到父元素,选择当前的第一个元素
    选择当前p元素的父级元素,选择父级元素的第一个,并且是当前元素才生效*/
    p:nth-child(2){
        background: #2700ff;
    }
    /*选择父元素,下的p元素的第二个,类型*/
    p:nth-of-type(1){
        background: green;
    }
    a:hover{
        background: #000b3e;
    }
</style>
<body>
    <a href="">123</a>
    <p>p1</p>
    <p>p2</p>
    <p>p3</p>
    <ul>
        <li>li1</li>
        <li>li2</li>
        <li>li3</li>
    </ul>
</body>

属性选择器

<style>
    .demo a{
        float: left;
        display: block;
        height: 50px;
        width: 50px;
        border-radius: 10px;
        background: #2700ff;
        text-align: center;
        color: gainsboro;
        text-decoration: none;
        margin-right: 5px;
        font: bold 20px/50px Arial;
    }
    /*属性名   属性名=属性值(正则)
    =绝对大于
    *=包含这个所有元素
    ^=以这个元素开头
    $=以这个元素结尾
     */
    /*存在id属性的元素     a[]{}*/
    /*a[id]{*/
    /*    background: yellow;*/
    /*}*/
    /*id=first的元素*/
    /*a[id=first]{*/
    /*    background: #63ff23;*/
    /*}*/
    /*class 种有links的元素*/
    /*a[class*=links]{*/
    /*    background: yellow;*/
    /*}*/
    /*选中href中一http开头的元素*/
    /*a[href^=http]{*/
    /*    background: yellow;*/
    /*}*/
    /*a[href$=jpg]{*/
    /*    background: yellow;*/
    /*}*/
</style>
<body>
<p class="demo">
    <a href="https://www.baidu.com" class="links item first" id="first">1</a>
    <a href="" class="links item active" target="_blank" title="test" >2</a>
    <a href="images/123.html" class="links item">3</a>
    <a href="images/123.png" class="links item">4</a>
    <a href="images/123.jpg" class="links item">5</a>
    <a href="abc" class="links item">6</a>
    <a href="/a.pdf" class="links item">7</a>
    <a href="/abc.pdf" class="links item">8</a>
    <a href="abc.doc" class="links item">9</a>
    <a href="abcd.doc" class="links item last">10</a>
</p>
</body>

CSS美化网页

为什么要美化网页

  1. 有效的彻底页面信息
  2. 美化网页,页面漂亮,才能吸引用户
  3. 凸显页面的主题
  4. 提高用户的体验

​ span标签:重点要突出的字,使用span套起来

<style>
    #title{
        font-size: 50px;
    }
</style>
<body>
hello<span id="title">world!</span>
</body>

字体样式

<!--font-family:字体
    font-size:字体大小
    font-weight:字体粗细
    color:字体颜色颜色
    oblique:斜体
-->
<style>
    body{
        font-family: 楷体;
    }
    h1{
        font-size: 50px;
    }
    .p1{
        font-weight: bold;
    }
</style>

文本样式

  1. 颜色 color rgb rgba

  2. 文本对齐的方式 text-align:center

  3. 首行缩进 text:indent:2em

  4. 行高 line-height 单行文字上下居中! line-height=height

  5. 装饰 text-decoration

  6. 文本图片水平对齐 vertical-align:middle

<!--
颜色:
    单词
    RGB 0~F
    RGBA
text-align:center;排版,居中
text-indent: 2em;段落首行缩进
行高 和 块的高度一致,就可以向下居中
-->
<style>
    h1{
        color: rgba(0,255,255,0.5);
        text-align: center;
    }
    .p1{
        text-indent: 2em;
    }
    .p2{
        background: #2700ff;
        height: 300px;
        line-height: 300px;
    }
</style>
<body>
<h1>故事介绍</h1>
<p class="p1">这个世界名为元泱境界,脉是构成万物的基础。每隔333年,会有一个神秘而强大的异常生物重生,它就是魁拔!魁拔的每一次出现,都会给元泱境界带来巨大的灾难!即便是天界的神族,也在劫难逃。在天地两界各种力量的全力打击下,魁拔一次次被消灭,但又总是按333年的周期重新出现。魁拔纪元1664年,天神经过精确测算后,在魁拔苏醒前一刻对其进行毁灭性打击。但谁都没有想到,由于一个差错导致新一代魁拔成功地逃脱了致命一击。</p>
<p class="p2">在偏远的兽国窝窝乡,蛮大人和蛮吉每天为取得象征成功和光荣的妖侠纹耀而刻苦修炼,却把他们生活的村庄搅得鸡犬不宁。村民们绞尽脑汁把他们赶走。一天,消灭魁拔的征兵令突然传到窝窝乡,村长趁机怂恿蛮大人和蛮吉从军参战。然而,在这个一切都凭纹耀说话的世界,仅凭蛮大人现有的一块冒牌纹耀,不要说参军,就连住店的资格都没有。受尽歧视的蛮吉和蛮大人决定,混上那艘即将启程去消灭魁拔的巨型战舰,直接挑战魁拔,用热血换取至高的荣誉。</p>
</body>

超链接伪类

<style>
    /*默认的颜色*/
    a{
        text-decoration: none;
    }
    /*鼠标悬浮的状态*/
    a:hover{
        color: orange;
        font-size: 50px;
    }
    /*鼠标按住未释放的状态*/
    a:active{
        color: green;
    }
    /*已访问*/
    a:visited{
        color: #ff008a;
    }
</style>

列表

/*ul li*/
<style>
	/*list-style:
  	none:去掉原点
  	circle:空心圆
  	decimal:数字
  	square:正方形*/
  /*ul{*/
  	/*background:#a0a0a0;*/
  /*}*/
  ul li{
    height:30px;
    list-style:none;
    text-indent:1em;
  }
</style>

背景

<style>
    div{
        width: 1000px;
        height: 700px;
        border: 1px solid red;
        background-image: url("../../image/tx.jpg");
        /*默认是全部平铺的*/
    }
    .div1{
        background-repeat: repeat-x;
    }
    .div2{
        background-repeat: repeat-y;
    }
    .div3{
        background-repeat: no-repeat;
    }
</style>
<body>
    <div class="div1"></div>
    <div class="div2"></div>
    <div class="div3"></div>
</body>

盒子模型

什么是盒子模型

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-KkZfLx8F-1661151943834)(C:\Users\17442\Pictures\Saved Pictures\1.png)]

margin:外边距

padding:内边距

border:边框

边框

  1. 边框的粗细
  2. 边框的样式
  3. 边框的颜色
<style>
    /*body总有一个默认的外边框margin:0,常见操作*/
    /*h1,ul,li.a.body{*/
        /*margin:0;*/
        /*padding:0;*/
        /*text-decoration: none;*/
    /*}*/
    /*border:粗细,样式,颜色*/
    #box{
        width: 300px;
        border: 1px solid red;
    }
    h2{
        font-size: 16px;
        background-color: #3cbda6;
        line-height: 30px;
    }
    form{
        background: #3cbda6;
    }
    div:nth-of-type(1) input{
        border: 3px solid black;
    }
    div:nth-of-type(2) input{
        border: 3px dashed #4d0b8c;
    }
    div:nth-of-type(2) input{
        border: 2px dashed #008c27;
    }
</style>
<body>
    <div id="box">
        <h2>会员登录</h2>
        <form action="#">
            <div>
                <span>用户名:</span>
                <input type="text">
            </div>
            <div>
                <span>密码:</span>
                <input type="password">
            </div>
            <div>
                <span>邮箱:</span>
                <input type="text">
            </div>
        </form>
    </div>
</body>

内外边距

<!--外边距的妙用:居中元素
margin:0 auto-->
<style>
    #box{
        width: 300px;
        border: 1px solid red;
        margin:0 auto;
    }
    /*
    顺时针旋转
    margin:0
    margin:0 1px
    margin:0 1px 2px 3px
     */
    h2{
        font-size: 16px;
        background-color: #3cbda6;
        line-height: 30px;
        color: white;
        margin:0 1px 2px 3px;
    }
    form{
        background: #3cbda6;
    }
    input{
        border: 1px solid black;
    }
    div:nth-of-type(1){
        padding: 10px 2px;
    }
</style>
<body>
    <div id="box">
        <h2>会员登录</h2>
        <form action="#">
            <div>
                <span>用户名:</span>
                <input type="text">
            </div>
            <div>
                <span>密码:</span>
                <input type="password">
            </div>
            <div>
                <span>邮箱:</span>
                <input type="text">
            </div>
        </form>
    </div>
</body>

盒子的计算方式:你这个元素到底多大?

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-zcGH3rY0-1661151943836)(C:\Users\17442\Pictures\Saved Pictures\2.png)]

margin+border+padding+内容宽度

圆角边框

4个角

<!--
左上 右上 右下 左下,顺时针方向-->
<!--
圆圈:圆角=宽度
-->
<style>
    div{
        width: 50px;
        height: 50px;
        margin: 30px;
        background: red;
        border-radius: 50px 50px 0 0;
    }
</style>

盒子阴影

<!--margin:0 auto 居中
要求:块元素,块元素有固定的宽度-->
<style>
    img{
        border-radius: 50px;
        box-shadow: 10px 10px 100px yellow;
    }
</style>
<body>
    <div style="width: 1000px; display:block; text-align: center">
        <div style="margin: 0 auto">
            <img src="../../image/tx.jpg" alt="">
        </div>
    </div>
</body>

浮动

标准文档流

块级元素:独占一行

h1-h6	p div 列表...

行内元素:不独占一行

span a ung strong

行辈元素可以被包含在块级元素中,反之,则不可以~

display

<!--
block 块元素
inline 行内元素
inline-block 是块元素,但是可以内联,在一行
none
-->
<style>
    div{
        width: 100px;
        height: 100px;
        border: 1px solid red;
        display: inline;
    }
    span{
        width: 100px;
        height: 100px;
        border: 1px solid red;
        display: inline-block;
    }
</style>

小结:

1.浮动元素后面增加div 简单,代码尽量避免空div

2.设置父元素的高度 简单,元素假设有了固定的高度,就会被限制

3.overflow 简单,下拉的一些场景避免使用

4.父类添加一个伪类:after 写法稍微复杂一点,但是没有副作用,推荐使用!

对比

  • display

    方向不可以控制

  • float

    浮动起来的话会脱离标准文档流,所以要解决附近边框塌陷的问题~

定位

相对定位

<!--相对定位
相对于增加原来的位置进行偏移-->
<style>
    div{
        margin: 10px;
        padding: 5px;
        font-size: 12px;
        line-height: 25px;
    }
    #father{
        border: 1px solid #666;
        padding: 0;
    }
    #first{
        background-color: #a13d30;
        border: 1px dashed #b27530;
        position: relative;/*相对定位:上下左右*/
        top: -20px;
        left: 20px;
    }
    #second{
        background-color: #255099;
        border: 1px dashed #255066;
    }
    #third{
        background-color: #1c6699;
        border: 1px dashed #1c6615;
        position: relative;
        bottom: -10px;
        right: 20px;
    }
</style>
<body>
    <div id="father">
        <div id="first">第一个盒子</div>
        <div id="second">第二个盒子</div>
        <div id="third">第三个盒子</div>
    </div>
</body>

相对定位:position:relative;

相对于原来的位置,进行指定的偏移,相对定位的话,他仍然在标准文档流中,原来的位置会被保留

top: -20px;
left: 20px;
bottom: -10px;
right: 20px;

绝对定位

定位:基于xxx定位,上下左右

1.没有父级元素的前提下,相对于浏览器的定位

2.假设父级元素存在的,我没退出会相对于父级元素进行前移

3.在父级元素范围内移动

相对于父级或浏览器的位置,进行指定的偏移,相对定位的话,它任然在标准文档流中,原来的位置会被保留

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值