ICode9

精准搜索请尝试: 精确搜索
首页 > 其他分享> 文章详细

CSS入门

2021-07-22 22:02:44  阅读:119  来源: 互联网

标签:入门 样式 标签 color nbsp 选择器 CSS


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;
}

后代选择器

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

组合选择器

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

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

黑马头条案例

1.案例效果

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.顶部导航栏

  • 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.左侧分享图片

  • 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.中间正文

  • HTML标签
<!--正文内容--> 
<div class="center"> 
    <!--标题-->
    <div>
        <h1>支付宝特权福利!芝麻分600以上用户惊喜,网友:幸福来得突然?</h1>
    </div>

    <!--作者信息-->
    <div>
        <i><font size="2" color="gray">作者:itheima 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.右侧广告图

  • 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.底部链接

  • 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.案例效果

2.表格标签

<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样式中万物皆盒子,通过设置元素的边框以及元素内容的边距,从而实现元素在页面中的布局。

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标签
 <!--顶部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样式
/*背景图片*/
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.页脚实现

  • 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; /**/
}

标签:入门,样式,标签,color,nbsp,选择器,CSS
来源: https://blog.csdn.net/weixin_49226949/article/details/119009900

本站声明: 1. iCode9 技术分享网(下文简称本站)提供的所有内容,仅供技术学习、探讨和分享;
2. 关于本站的所有留言、评论、转载及引用,纯属内容发起人的个人观点,与本站观点和立场无关;
3. 关于本站的所有言论和文字,纯属内容发起人的个人观点,与本站观点和立场无关;
4. 本站文章均是网友提供,不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属;如您发现该文章侵犯了您的权益,可联系我们第一时间进行删除;
5. 本站为非盈利性的个人网站,所有内容不会用来进行牟利,也不会利用任何形式的广告来间接获益,纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

专注分享技术,共同学习,共同进步。侵权联系[81616952@qq.com]

Copyright (C)ICode9.com, All Rights Reserved.

ICode9版权所有