菜单 搜索
首页 前端知识 HTML CSS入门

HTML CSS入门

2024-03-15 10:03:51 前端知识 前端哥 140 399 我要收藏

CSS概述

CSS指层叠样式表 (Cascading Style Sheets)，用来定义HTML网页中的内容用什么样式来显示。

HTML: 指定网页显示的内容
CSS: 指定内容显示的样式
复制

CSS入门案例

<html>
    <head>
        <meta charset="UTF-8">
   		<title>入门案例</title>
        <style>
            /*定义h1标签中的内容，显示的样式*/
            h1{
                color:red;
                font-size:100px
            }
        </style>
    </head>
    
    <body>
        <h1>黑马程序员<h1>
    </body>
</html>
复制

CSS引入方式

CSS需要和HTML中结合起来使用，一共有三种结合方式

  • 内联样式
<!--定义文字颜色为红色，字体大小为20个像素-->
<h1 style="color: red; font-size: 20px">Hello World</h1>
复制
  • 内部样式

内部样式需要在<head></html>标签中定义<style></style>标签，然后在<style></style>内部定义样式。

<html lang="en">
<head>
    <!--内部样式-->
    <style>
        /*定义div标签中的内容，显示的样式*/
        div{
            color: red;	/*字体颜色为红色*/
            font-size: 20px;	/*字体大小为20个像素*/
        }
    </style> 
</head>
<body>
    <div>div1</div>
    <div>div2</div>
</body>
</html>
复制
  • 外部样式

外部样式是把样式专门写成一个.css文件，然后通过文件路径将样式引入到HTML文件中。当多个网页需要使用相同的样式时，推荐使用这种方式。

定义CSS样式文件，文件路径为css/a1.css

div{
    color: red;
    font-size: 20px;
}
复制

将样式文件引入到HTML文件中

<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>引入方式3</title>
    <!--外部样式-->
    <link rel="stylesheet" href="css/01.css"/>
</head>
<body>
    <div>div1</div>
    <div>div2</div>
</body>
</html>
复制

CSS选择器

选择器是用来选择HTML指定的标签，然后统一对选中的标签设定样式。

  • 常见的选择器有下面几种
1.元素选择器： 通过标签名来选择
2.id选择器：通过id属性值进行选择
3.类选择器：通过class属性值进行选择
4.属性选择器：通过指定的属性名和属性值进行选择
5.伪类选择器：通过对操作状态进行选择(未访问、悬停、访问中、访问后)
6.后代选择器：通过标签的嵌套关系进行选择
7.组合选择器：组合几种选择器进行选择
复制

元素选择器

/*选择所有div元素，样式为红色*/
div{
	color: red;
}
复制

id选择器

/*选择所有id属性值为d1的元素，颜色为绿色*/
#d1{
    color: green;
}
复制

类选择器

/*选择所有class属性值为cls的元素，颜色为蓝色*/
.cls{
    color: blue;
}
复制

属性选择器

/*选择所有具有type属性的元素，颜色为红色*/
[type]{
    color: red;
}
 
/*选择所有type属性值为password的元素，颜色为蓝色*/
[type=password]{
    color: blue;
}
复制

伪类选择器

/*去除a标签的默认样式*/
a{
    text-decoration: none;
}
 
/*a标签未访问的状态*/
a:link{
    color: magenta;
}
 
/*a标签已访问的状态*/
a:visited{
    color: gray;
}
 
/*a标签鼠标悬浮的状态*/
a:hover{
    color: red;
}
 
/*a标签已选中的状态*/
a:active{
    color: yellow;
}
 
注意：a:hover 必须在 CSS 定义中的 a:link 和 a:visited 之后，才能生效！a:active 必须在 CSS 定义中的 a:hover 之后才能生效！伪类名称对大小写不敏感。
复制

后代选择器

/*先选中class值为center的元素，再找到他下面的子元素li*/
.center li{
    color:red
}
复制

组合选择器

以上所有的选择器都可以组合起来一起使用，多个选择器需要用,进行分割。

/*选中class为center的元素的子元素li，和id值为d1的元素*/
.center li,#d1{
	color:yellow
}
复制

黑马头条案例

1.案例效果

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-4nUlEAmF-1678414323009)(assets/image-20201202174450120.png)]

2.所需样式

  • 边框样式
div{
    /*边框：宽度5px,实线,黑色*/
    border: 5px solid black;
	
    /*设置上边框: 宽度5px 实线,黑色*/
    border-top: 5px solid black;
    /*设置左边框: 宽度5px 双线,红色*/
    border-left: 5px double red;
    /*设置右边框: 宽度5px 点线,蓝色*/
    border-right: 5px dotted blue;
    /*设置下边框: 宽度5px 虚线,品红*/
    border-bottom: 5px dashed pink;
    
	/*设置边框的弧度*/
    border-radius: 25px;
    /*宽度*/
    width: 150px;
    /*高度*/
    height: 150px;
}
复制
  • 文本样式
div{
    /*文本颜色*/
    color:  #ff0000;
 
    /*字体*/
    font-family: 宋体;
 
    /*字体大小*/
    font-size: 25px;
 
    /*下划线  none：无  underline：下划线  overline：上划线  line-through：删除线*/
    text-decoration: none;
 
    /*水平对齐方式  left：居左  center：居中  right：居右*/
    text-align: center;
 
    /*行间距*/
    line-height: 60px; 
}
 
span{
    /*文字垂直对齐  top：居上   bottom：居下  middle：居中   百分比*/
    vertical-align: 50%; 
} 
复制

3.顶部导航栏

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-evVMA9LO-1678414323010)(assets/image-20201202130936924.png)]

  • HTML标签
<!--顶部登录注册更多-->
<div class="top">
    <a href="#" target="_self">登录&nbsp;&nbsp;</a>
    <a href="#">注册&nbsp;&nbsp;</a>
    <a href="#">更多&nbsp;&nbsp;</a>
</div>
 
<!--导航条-->
<div class="nav">
    <img src="../img/logo.png"/>
    <a href="#">首页&nbsp;&nbsp;</a>/
    <a href="#">科技&nbsp;&nbsp;</a>/
    <font color="gray">正文</font>
    <hr/>
</div>
复制
  • CSS样式
/*顶部导航条*/
.top{
     background: black;  /*背景色*/
     line-height: 40px;  /*行高*/
     text-align: right;  /*文字水平右对齐*/
     font-size: 20px;    /*字体大小*/
     padding-right: 20px; /*内边距20像素*/
}
 
.nav{
    line-height:40px;
}
 
/*顶部超链接颜色*/
.top a{
    color: white;
}
/*其他超链接颜色*/
a{
    text-decoration: none;
    color: black;
}
/*超链接悬浮状态*/
a:hover{
    color: red;
}
复制

4.左侧分享图片

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-0UbyxXR0-1678414323011)(assets/image-20201202132759083.png)]

  • HTML标签
 <!--左侧分享-->
<div class="left">
    <a><img src="../img/cc.png"/><span>&nbsp;评论</span></a><br>
    <hr>
    <a><img src="../img/weibo.png"/><span>&nbsp;&nbsp;微博</span></a>&nbsp;<br>
    <a><img src="../img/repost.png"/><span>&nbsp;&nbsp;转发</span></a>&nbsp;<br>
    <a><img src="../img/qq.png"/><span>&nbsp;&nbsp;空间</span></a>&nbsp;<br>
    <a><img src="../img/wx.png"/><span>&nbsp;微信</span></a>&nbsp;<br>
</div>
复制
  • CSS样式
/*左侧分享样式*/
.left{
     width: 20%;	/*宽度20%*/
     float: left;	/*左浮动*/
     text-align: center;  /*内容水平居中*/
}
 
/*左侧图片样式*/
.left img{
    width: 38px;	
    height: 38px;
}
 
/*左侧文字样式*/
.left span{
    vertical-align: 50%;	/*垂直居中*/
}
复制

5.中间正文

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-4FGRE4EA-1678414323012)(assets/image-20201202132759083.png)]

  • HTML标签
<!--正文内容--> 
<div class="center"> 
    <!--标题-->
    <div>
        <h1>支付宝特权福利！芝麻分600以上用户惊喜，网友：幸福来得突然？</h1>
    </div>
 
    <!--作者信息-->
    <div>
        <i><font size="2" color="gray">作者：suihao 2088-08-08</font></i>
        <hr/>
    </div>
 
    <!--副标题-->
    <div>
        <h3>支付宝特权福利！芝麻分600以上用户惊喜，网友：幸福来得突然？</h3>
    </div>
 
    <!--正文内容-->
    <div>
        <p>这些年，马云的风头正盛，但是上个月他毅然辞去了阿里巴巴的职务。而马云所做的很多事情也的确改变了这个世界，特别是在移动支付领域，更是走在了世界的前列。如今中国的移动支付已经成为老百姓的必备，支付宝对中国社会的变革都带来了深远的影响。不过马云依然没有满足，他认为移动互联网将会成为人类的基础设施，而且这里面的机会和各种挑战还非常多。</p>
        <p>支付宝的诞生就是为了解决淘宝网的客户们的买卖问题，而随着支付宝的用户的不断增加，支付宝也推出了一系列的附加功能。比如生活缴费、转账汇款、还信用卡、车主服务、公益理财等，往简单的说，支付宝既可以满足人们的日常生活，又可以利用芝麻信用进行资金周转服务。除了芝麻分能够进行周转以外，互联网信用体系下的产品多多，我们对比以下几个产品看看区别:
            <ol>
                <li>蚂蚁借呗，芝麻分600并且受到邀请开通福利，这个就是支付宝贷款，直接秒杀了银行贷款和线下金融公司，是现在支付宝用户使用最多的。</li>
                <li>微粒贷：于2015年上线，主要面向QQ和微信征信极好的用户而推出，受到邀请才能申请开通，额度最高有30万，难度较大</li>
                <li>蚂蚁巴士：这个在微信 蚂蚁巴士 公众平台申请,对于信用分要求530分以上才可以,额度1-30万不等，目前非常火爆</li>
            </ol>
            </p>
            <p>说起支付宝中的芝麻信用功能，相信更是受到了许多人的推崇，因为随着自己使用的不断增多，信用分会慢慢提高，而达到了一个阶段，就可以获得许多的福利。而当我们的芝麻信用分可以达到600分以上的时候，会有令我们想象不到的惊喜，接下来就让我们一起来看看，具体都有哪些惊喜吧。</p>
            <p><b>一、芝麻分600以上福利之信用购。</b>网购相信大家都不陌生，但是很多时候，网购都有一个通病，就是没办法试用，导致很多人买了很多自己不喜欢的东西。但是只要你的支付宝芝麻分在650及以上，就能立马享有0元下单，收到货使用满意了再进行付款。还能享用美食的专属优惠，是不是很耐斯</p>
            <p><b>二、芝麻分600以上福利之信用免押。</b>芝麻信用与木鸟短租联合推出信用住宿服务，芝麻分600及以上的用户可享受免押入住特权。木鸟短租拥有全国50万套房源，是国内领先的短租民宿预订平台。包括大家知道的飞猪信用住，大部分酒店可以免押金入住，离店再交钱。</p>
            <p><b>三、芝麻分600以上福利之国际驾照。</b>我们经常听说的可能只是中国驾照，但现在芝麻分已经应用到了国际领域，只要你的芝麻分够550就可以免费办理国际驾照，也有不少人非常佩服马云，一个简单的芝麻分居然有如此大的功能，也从侧面反应出来马云在国际上的地位，这个国际驾照是由新西兰、德国、澳大利亚联合认证，可以在全球200多个国家通行，相信大家一定都有一个自驾全球的梦想吧，而现在支付宝就给了你一把钥匙，剩下的就你自己搞定了！有没有想带着你的女神来一次浪漫之旅呢？</p>
            <p>随着互联网对我们生活的改变越来越大，信用这一词也被大家推上风口浪尖，不论是生活出行，还是其他的互联网服务，与信用体系已经密不可分了，马云当初说道，找老婆需要拼芝麻分，如今似乎也要成为现实，那么你们的芝麻分有多少了呢？
    		</p>
	</div>
</div>
复制
  • CSS样式
.center{
     float: left;
     width: 60%;
}
复制

6.右侧广告图

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-50VLkYDR-1678414323013)(assets/image-20201202132759083.png)]

  • HTML标签
<!--右侧图片-->
<div class="right">
    <img src="../img/ad1.jpg" width="100%" />
    <img src="../img/ad2.jpg" width="100%"  />
    <img src="../img/ad3.jpg" width="100%"  />
    <img src="../img/ad1.jpg" width="100%"  />
    <img src="../img/ad2.jpg" width="100%" />
    <img src="../img/ad3.jpg" width="100%" />
</div>
复制
  • CSS样式
.right{
     width: 20%;
     float: left;
}
复制

7.底部链接

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-FxrI2tsQ-1678414323017)(assets/image-20201202133251357.png)]

  • HTML标签
<!--底部超链接-->
<div class="footer">
    <a href="#">关于黑马</a> &nbsp;
    <a href="#">帮助中心</a> &nbsp;
    <a href="#">开放平台</a> &nbsp;
    <a href="#">诚聘英才</a> &nbsp;
    <a href="#">联系我们</a> &nbsp;
    <a href="#">法律声明</a> &nbsp;
    <a href="#">隐私政策</a> &nbsp;
    <a href="#">知识产权</a> &nbsp;
    <a href="#">廉政举报</a> &nbsp;
</div>
复制
  • CSS样式
/*底部页脚超链接样式*/
.footer{
    clear: both;    /*清除浮动*/
    background: blue;   /*背景色*/
    text-align: center; /*文字水平居中对齐*/
    line-height: 25px;
} 
 
/*底部页脚超链接文字颜色*/
.footer a{
    color: white;
}
复制

登录页面案例

1.案例效果

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-b4B03daD-1678414323018)(assets/image-20201202134042867.png)]

2.表格标签

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-5rHu56KE-1678414323019)(assets/image-20201202135229957.png)]

<table width="400px" border="1px" align="center">
    <!--表头-->
    <thead>
        <tr>
            <th>姓名</th>
            <th>性别</th>
            <th>年龄</th>
            <th>数学</th>
            <th>语文</th>
        </tr> 
    </thead>
	<!--表格体-->
    <tbody>
        <tr align="center">
            <td>张三</td>
            <td rowspan="2">男</td>
            <td>23</td>
            <td colspan="2">90</td>
            <!--<td>90</td>-->
        </tr>
 
        <tr align="center">
            <td>李四</td>
            <!--<td>男</td>-->
            <td>24</td>
            <td>95</td>
            <td>98</td>
        </tr>
    </tbody>
	<!--表格尾-->
    <tfoot>
        <tr>
            <td colspan="4">总分数：</td>
            <!--<td></td>
            <td></td>
            <td></td>-->
            <td>373</td>
        </tr>
    </tfoot>
</table>
复制

3.所需样式

  • 背景图片样式
/*
background-repeat: 背景图重复; 
    no-repeat: 不重复
    repeat-x：水平重复  
    repeat-y：垂直重复  
    repeat：水平+垂直重复
*/
body{
    background: url("../img/bg.jpg");
    background-repeat: repeat;
}
复制
  • 轮廓样式
/*
outline: 设置轮廓样式
	double：双实线 
	dotted：圆点  
	dashed：虚线 
	none：无
*/
input{
    outline: none;
}
复制
  • 元素显示演示
/*
dispplay: 设置元素显示样式
	inline：内联元素(无换行、无长宽)
	block：块级元素(有换行) 
	inline-block：内联元素(有长宽) 
	none：隐藏元素
*/
div{
    display: inline-block;
    width: 100px;
}
复制

4.盒子模型

在CSS样式中万物皆盒子，通过设置元素的边框以及元素内容的边距，从而实现元素在页面中的布局。

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-bGGSAaV8-1678414323020)(assets/image-20201202141335181.png)]

margin: 70px 35px 30px 65px;  	/*上,右,下,左外边距*/
margin-top: 20px;		/*上外边距*/
margin-bottom: 20px;	/*下外边距*/
margin-left: 20px;		/*左外边距*/
margin-right: 20px;		/*右外边距*/ 
 
padding: 50px 50px 20px 25px;  /*上,右,下,左内边距*/
padding-top: 20px;		/*上内边距*/
padding-bottom: 20px;	/*下内边距*/
padding-left: 20px;		/*左内边距*/
padding-right: 20px;	/*右内边距*/
复制

5.顶部Logo和表单实现

  • HTML标签

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-u8AmAnTk-1678414323021)(assets/image-20201202150847899.png)]

 <!--顶部logo-->
<div>
    <img src="../img/logo.png">
</div>
 
<!--中间表单-->
<div class="center">
    <form action="#" method="get">
        <table width="100%">
            <thead>
                <tr>
                    <th colspan="2">用户登录<hr></th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td><label>账号</label></td>
                    <td><input type="text" placeholder="请输入账号"></td>
                </tr>
                <tr>
                    <td><label>密码</label></td>
                    <td><input type="password" placeholder="请输入密码"></td>
                </tr>
            </tbody>
            <tfoot>
                <tr>
                    <td colspan="2"><button>登录</button></td>
                </tr>
            </tfoot>
        </table>
    </form>
</div>
复制
  • CSS样式

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-bK7rS0Bj-1678414323022)(assets/image-20201202155417986.png)]

/*背景图片*/
body{
    background: url("../img/bg.png"); 
}
 
/*设置表单的背景颜色*/
.center{
    background: white;      /*背景色*/
    width: 40%;             /*宽度*/
    margin: auto;           /*水平居中外边距*/
    margin-top: 100px;      /*上外边距*/
    border-radius: 15px;    /*边框弧度*/
    text-align: center;     /*文本水平居中*/
}
 
/*表头样式*/
thead th{
    font-size: 20px;   /*字体大小*/
    color: orangered;  /*字体颜色*/
}
 
/*标题提示信息样式*/
tbody label{
    font-size: 20px;
}
 
/*标题输入框样式*/
tbody input{
    border: 1px solid gray;
    border-radius: 10px;
    width: 90%;
    height: 40px;
    outline: none;
}
 
/*表底按钮样式*/
tfoot button{
    width: 95%;	/*宽95%*/
    height: 40px;	/*高40像素*/
    background: crimson;	/*背景颜色*/
    border-radius: 5px;		/*边框弧度*/
    border: 1px solid crimson;	/*边框样式*/
}
 
/*表行高度*/
table tr{
    height: 60px;
}
复制

6.页脚实现

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-4mqOTRxs-1678414323023)(assets/image-20201202161410213.png)]

  • HTML标签
<!--底部页脚-->
<div class="footer">
    <br/><br/>
    登录/注册即表示您同意&nbsp;&nbsp;
    <a href="#" target="_blank">用户协议</a>&nbsp;&nbsp;
    和&nbsp;&nbsp;
    <a href="#" target="_blank">隐私条款</a>&nbsp;&nbsp;&nbsp;&nbsp;
    <a href="#" target="_blank">忘记密码?</a>
</div>
复制
  • CSS样式
/*页脚样式*/
.footer{
    text-size:15px
}
 
/*超链接样式*/
a{
    text-decoration: none;  /*去除超链接的下划线*/
    color:blue; /**/
}
复制
转载请注明出处或者链接地址：https://www.qianduange.cn//article/3793.html
标签
上一篇：HTML基本结构及基本标签
评论
还可以输入200
共0条数据,当前/页
首页 上一页 下一页 尾页
相关文章

前端哥

前端哥

广告位招租：QQ85750956
发布的文章

python闭包实现斐波那契

2024-04-12 16:04:51

python解析cookie

2024-04-12 16:04:23

python爬取tiktokseller center页面大屏数据

2024-04-12 16:04:37

python爬取tiktok视频

2024-04-12 16:04:00

评论回复功能代码js html css

2024-03-23 13:03:47

js 走马灯效果 无缝 不断实现

2024-04-09 23:04:58

Select下拉框支持搜索，jq插件，使用超级简单！

2024-04-09 23:04:56

JQuery的基础笔记

2024-04-09 23:04:55

【JavaScript&&jquery】账号登录与短信验证码登录切换

2024-04-09 23:04:53

jQuery 判断元素上是否绑定了某个事件

2024-04-09 23:04:53

广告位招租：QQ85750956
大家推荐的文章
1

js数组常用方法（19种）|你会的到底有多少呢？

2024-04-08 11:04:211000
2

【Echarts系列】—— 实现电池图、3D立体圆形柱状图

2024-03-03 11:03:011000
3

ECharts 饼状图颜色设置

2024-02-16 14:02:001000
4

echarts实现动态渲染多柱图

2024-02-12 14:02:341000
5

移动端css布局大全

2024-02-06 15:02:421000
6

使用HTML5和JS实现日期下拉框功能

2024-02-04 11:02:521000
7

JS生成条形码JsBarcode.all.js，转成图片canvas2image.js，并打印二维码jQuery.print.js

2024-01-27 01:01:181000
8

vue实现可输入可下拉选择的组件

2024-04-05 09:04:35999
9

echarts 图表，定时器实现数据实时动态

2024-03-13 00:03:28999
10

jQuery事件处理

2024-03-12 01:03:32999

rss订阅 百度xml 谷歌xml 搜狗xml soxml 神马搜索xml 网站地图

Copyright © 2018-2022 前端哥 陕ICP备2023000550号-1 前端哥

讲个笑话：程序员心理活动：看别人的代码，这都写得什么玩意儿，垃圾！！看自己一个月前的代码：这TM谁写得代码，垃圾！再一看，这代码怎么这么眼熟？我自己写得？仔细一看，卧槽！还TM的真是我自己写的！！

前端技术交流源码工具分享网站

会员中心 联系我 留言建议 回顶部
复制成功！