JavaWeb——（2）css

其他 2021-03-22 04:42:00 阅读次数: 0

目录

一、css简介

1.1什么是css

1.2css的作用

1.3css的引入方式和书写规范

1.3.1内嵌样式

1.3.2内部样式

1.3.3外部样式

1.3.4@import方式

二、css选择器

2.1基本选择器

2.1.1元素选择器

2.1.2id选择器

2.1.3class选择器

2.1.4选择器的优先级

2.2属性选择器

2.3伪元素选择器

2.4层级选择器

三、css属性

3.1文字属性

3.2文本属性

3.3背景属性

3.4列表属性

3.5尺寸属性

3.6显示属性

3.7浮动属性

四、css盒子模型

五、图书商城页面练习

一、css简介

1.1什么是css

css为层叠样式表，英文全称：Cascading Style Sheets，css是对html进行样式修饰语言，

css能够对网页中元素位置的排版进行像素级精确控制，支持几乎所有的字体字号样式，拥有对网页对象和模型样式编辑的能力，

层叠：就是层层覆盖叠加。如果不同的css样式对同一html标签进行修饰，样式有冲突的部分应用优先级高的，不冲突的部分共同作用。（如果一个红色五号字样式先对html进行修饰，然后粉色样式再修饰，那么最后html样式为粉色五号字）

样式表：就是css属性样式的集合

1.2css的作用

  • 修饰html，使其html样式更加好看
  • 提高样式代码的复用性
  • html的内容与样式相分离，便于后期维护

1.3css的引入方式和书写规范

css的引入方式一般有四种，分别为内嵌样式、内部样式、外部样式、import方式：

1.3.1内嵌样式

内嵌样式是把css的代码嵌入到html标签中，例如：

<div style="color:red;font-size: 100px;">css内嵌样式</div>

需要注意的是：

  • 使用style属性将样式嵌入到html标签中
  • 属性的写法为：属性:属性值
  • 多个属性之间用分号“;”隔开

一般不建议这么使用，没有将html的内容和样式分开

1.3.2内部样式

内部样式是在head标签中使用style标签进行css的引入，

<!DOCTYPE html>
<html>
<head>
    <!--定义内部样式-->
    <style type="text/css">
        div{color: purple;font-size: 20px}
    </style>
</head>
<body>
    <div>css内部样式</div>
</body>
</html>

页面效果如下：

需要注意的是：

  • 使用style标签进行css的引入<style type="text/css">
    • type：告知浏览器使用css解析器去解析
  • 属性的写法：属性:属性值
  • 多个属性之间使用分号";"隔开

1.3.3外部样式

将css样式抽取成一个单独css文件，可供不同的html页面使用，一般我们通过link标签使用，

  • 创建css文件，将样式属性写在css文件中
  • 在head中使用link标签进行引入，格式为<link rel="stylesheet" type="text/css" href="css文件地址"/>
    • rel：代表要引入的文件与html的关系
    • type：告知浏览器使用css解析器去解析
    • href：css文件地址
  • 属性的写法：属性:属性值
  • 多个属性之间使用分号";"隔开

我们定义一个css样式文件mystyle.css，属性如下：

div{color: purple;font-size: 50px}

然后在html的head中用link标签进行引入，

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" type="text/css" href="mystyle.css">
</head>
<body>
    <div>外部样式</div>
</body>
</html>

网页效果：

1.3.4@import方式

我们还可以通过@import的方式导入css样式文件，

<style type="text/css">
    @import url("css地址");
</style>

我们试一下@import导入，

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css">
        @import url("mystyle.css");
    </style>
</head>
<body>
    <div>@import方式</div>
</body>
</html>

网页效果：

@import和link主要的区别如下：

  1. link所有浏览器都支持，import部分低版本IE不支持
  2. link是在head语句中跟着一起加载的，import是等待html加载完毕之后再加载
  3. import方式不支持javascript的动态修改

二、css选择器

css选择器用于选择你想要修饰的元素，

一般我们有基本选择器，属性选择器，伪元素选择器，层级选择器，

2.1基本选择器

2.1.1元素选择器

元素选择器是通过html的标签名进行选中的，格式为：html标签名{css属性}，例：

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

我们用代码测试一下元素选择器如何使用，

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        span{color: greenyellow;font-size: 50px}
    </style>
</head>
<body>
    <span>元素选择器</span>
</body>
</html>

网页效果： 

2.1.2id选择器

id选择器可以更加精确的选择到某一个标签，而不是这一类标签，格式为：#id的值{css属性}，

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        #div1{color: sandybrown;font-size: 50px}
        #div2{color: dodgerblue;font-size: 50px}
    </style>
</head>
<body>
    <div id="div1">div1</div>
    <div id="div2">div2</div>
</body>
</html>

页面效果：

2.1.3class选择器

我们可以将样式相同的一些标签设置为一个类，对整个类进行样式设计，格式为：.class的值{css属性}

我们设置第一个和第三个块样式相同，第二个块单独的不同，

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .style1{color: darkslategray;font-size: 50px}
        .style2{color: orangered;font-size: 50px}
    </style>
</head>
<body>
    <div class="style1">class1-div1</div>
    <div class="style2">class2-div1</div>
    <div class="style1">class1-div2</div>
</body>
</html>

网页效果：

2.1.4选择器的优先级

当不同的选择器样式作用于某个元素上，其优先级为：id>class>元素，

比如当id选择器和元素选择器同时对html的某个元素进行样式设计的时候，id选择器会覆盖元素选择器的样式。

2.2属性选择器

我们还可以通过属性来选择想要的的元素，格式为：基本选择器[属性=‘属性值’]{css属性}，

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css">
        input[type='text']{background-color: dodgerblue}
        input[type='password']{background-color: pink}
    </style>
</head>
<body>
    <form action="">
        姓名:<input type="text"><br/>
        密码:<input type="password"><br/>
    </form>
</body>
</html>

网页效果：

2.3伪元素选择器

一般常用的是a标签的伪元素选择器，a标签有四种状态，对应着四种不同的设置格式：

  • 静止状态：a:link{css属性}
  • 悬浮状态：a:hover{css属性}
  • 触发状态：a:active{css属性}
  • 完成状态：a:visited{css属性}

下面我们通过代码看看如何对a标签进行样式设置，

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css">
        a:link{color: blue}
        a:hover{color: red}
        a:active{color: black}
        a:visited{color: purple}
    </style>
</head>
<body>
    <a href="">跳转到本页面</a>
</body>
</html>

页面效果（点击后）：

2.4层级选择器

如果要找的元素在层级结构中，比如div中嵌套div，要找内部的div，

那么就通过父级选择器找到子级选择器，然后找到要找的元素，例如：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css">
        #div1 .style1 span{color: blue}
        #div1 .style2 span{color: red}
        #div2 .style1 span{color: gray}
        #div2 .style2 span{color: green}
    </style>
</head>
<body>
    <div id="div1">
        <div class="style1"><span>div1-style1</span></div>
        <div class="style2"><span>div1-style2</span></div>
    </div>
    <div id="div2">
        <div class="style1"><span>div2-style1</span></div>
        <div class="style2"><span>div2-style2</span></div>
    </div>
</body>
</html>

页面效果：

三、css属性

3.1文字属性

  • font-size：文字大小
  • font-family：字体类型
<div style="font-size:40px;font-family:黑体">文字属性</div>

网页效果：

3.2文本属性

  • color：颜色
  • text-decoration：下划线
    • none、underline    
  • text-align：对齐方式
    • left、center、right
  •  
<div style="color:red;text-decoration: underline;text-align: center">文本属性</div>

对应网页效果如下： 

3.3背景属性

  • background-color：背景颜色
  • background-image：背景图片
    • 属性值：url(图片地址)
  • background-repeat：平铺方式（图片填满页面的方式）
    • 属性值：默认repeat
      • repeat：横向纵向平铺
      • no-repeat:不平铺
      • repeat-y：纵向平铺
      • repeat-x：横向平铺
<body style="background-color: orange;background-image: url(images/luffy.jpg);background-repeat: repeat-x"></body>

页面效果如下：

可以看到页面背景为橘色，也插入了目标图片，平铺方式为x轴平铺

3.4列表属性

  • list-style-type：列表项前的小标志
  • list-style-image：列表项前的小图片
    • 属性值：url(图片地址)
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <ul style="list-style-type: square;list-style-image: url(images/forward.gif)">
        <li>列表项1</li>
        <li>列表项2</li>
        <li>列表项3</li>
    </ul>

</body>
</html>

页面效果：

3.5尺寸属性

  • width:宽度
  • height:高度
<div style="width: 100px;height: 100px;background-color: orange">尺寸属性</div>

页面效果：

3.6显示属性

  • display
    • none：隐藏
    • block：块级显示
    • inline：行级显示
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <style type="text/css">
        span{color:red;display: none}
    </style>
</head>
<form action="">
    姓名:<input id="name" type="text" /><span id="span">对不起 输入不符合要求</span><br>
    密码:<input id="pass" type="password" /><br>
    <input id="btn" type="button" value="提交" />

    <script type="text/javascript">
        document.getElementById("btn").onclick = function(){
            document.getElementById("span").style.display = "inline";
        };
    </script>
</form>
</html>

点击提交后页面效果：

3.7浮动属性

  • float：属性值有left、right
  • clear：清除浮动left、right、both

缺点为：

  1. 影响相邻元素不能正常显示
  2. 影响父元素不能正常显示

所以我们一般在使用浮动属性的元素后面加一个clear，让后面的元素不受浮动的布局影响，我们看看具体如何使用，

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css">
        #div1{width: 200px;height: 200px;background-color: red;float: left;}
        #div2{width: 200px;height: 200px;background-color: yellow;float: right;}
        .clear{clear: both}
    </style>
</head>
<body>
    <div id="div1"></div>
    <div id="div2"></div>
    <div class="clear"></div>
</body>
</html>

页面效果：

具体浮动属性的详细解释请看https://blog.csdn.net/weixin_39478524/article/details/114191734

四、css盒子模型

所有HTML元素可以看作盒子，在CSS中，"box model"这一术语是用来设计和布局时使用，

CSS盒模型本质上是一个盒子，封装周围的HTML元素，它包括：边距，边框，填充，和实际内容，

盒模型允许我们在其它元素和周围元素边框之间的空间放置元素，

下面的图片说明了盒子模型(Box Model)：

  • Margin：外边框与其他元素之间的距离
    • margin:10px：代表上下左右距离都是10个像素点
    • margin:1px 2px 3px 4px：上右下左（从上开始顺时针）的距离
    • margin:1px 2px：上下距离为1，左右距离为2
    • margin-top:1px：单独对上距离设置
  • border：边框
    • border-width：边框的厚度
    • border-color：边框的颜色
    • border-style：边框的线型
    • border-top：上边框
    • border-bottom：下边框
    • border-left：左边框
    • border-right：右边框
  • padding：边框内部与内部元素之间的距离
    • padding:10px：代表上下左右距离都是10个像素点
    • padding:1px 2px 3px 4px：上右下左（从上开始顺时针）的距离
    • padding:1px 2px：上下距离为1，左右距离为2
    • padding-top:1px：单独对上距离设置

我们用代码实际测试一下，

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css">
        #content{width: 100px;height: 100px;background-color: red}
        #box{width: 100px;height: 100px;border: 30px solid green;padding: 40px;margin: 50px}
    </style>
</head>
<body>
    <div id="box">
        <div id="content">content</div>
    </div>
</body>
</html>

页面效果：

五、图书商城页面练习

之前在html基本标签学习时利用table进行页面的布局，但是在实际开发中table用的非常少，都是用div+css进行布局，

下面我们试一下用div+css盒子模型进行布局，对之前实现的图书商城重新实现一遍，

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css">
        .clear{clear: both}
        #top_left{width: 300px;float: left;}
        #top_right{width: 350px;float: right;margin-top:30px;font-size: 15px;}
        #top_right img{margin-bottom: -5px}
        #top_right a{text-decoration: none;color: #06F}
        #top_right a:hover{color: #909}

        #menu{
            background-color: #1C3F09;
            border-top:4px solid #82B211;
            padding:10px 0;
            text-align: center;
        }
        #menu a{
            margin: 0 10px;
            color: #fff;
            text-decoration: none;
            font-family: Arial,Helvetica,sans-serif;
            font-size: 15px;
            font-weight: bold;
        }
        #menu a:hover{color: #999;}

        #search{background-color: #B6B684;padding: 8px 0;text-align: right;}
        #search input[type='image']{margin-bottom: -4px;margin-right: 250px;}

        #content{width:900px;margin: 10px auto 30px}/*上边界为10，下边界为30，左右边界自动你*/
        #content_top{text-align: right;font-size: 13px}
        #content_bottom{border: 1px solid #999;background-color: #FCFDEF;padding: 10px 15px;}
        #content_bottom h1{font-size: 20px;display: inline}
        #content_bottom span{margin-left:10px;font-size: 12px}
        #productlist_image img{width: 100%}
        .book{float: left;width: 25%;text-align: center;padding: 10px 0}
        .book img{width: 130px;height: 196px}
        #jumppage{text-align: center;margin: 10px 0}
        #jumppage a{
            padding: 2px 6px;
            border: 1px solid #9AAFE5;
            text-decoration: none;
            color: #9AAFE5;
        }
        #jumppage a:hover{color: #2B66A5;border: 1px solid #2B66A5}
        .currentpage{background-color: blue}

        #bottom{width:100%;height:60px;background-color: #EFEEDC;padding: 10px 0;}
        #bootom_left{width: 300px;float: left;margin-left: 100px;}
        #bootom_right{width: 400px;float: left;margin-left: 100px;margin-top: 8px;line-height: 25px}

    </style>
</head>
<body>
    <div id="page">
        <div id="top">
            <div id="top_left"><img src="images/logo.png"></div>
            <div id="top_right">
                <img src="images/cart.gif">
                <a href="#">购物车</a>|
                <a href="#">帮助中心</a>|
                <a href="#">我的账户</a>|
                <a href="#">新用户注册</a>
            </div>
        </div>
        <div class="clear"></div>
        <div id="menu">
            <a href="#">文学</a><a href="#">生活</a>
            <a href="#">计算机</a><a href="#">外语</a>
            <a href="#">经管</a><a href="#">励志</a>
            <a href="#">社科</a><a href="#">学术</a>
            <a href="#">少儿</a><a href="#">艺术</a>
            <a href="#">原版</a><a href="#">科技</a>
            <a href="#">考试</a><a href="#">生活百科</a>
            <a href="#" style="color: yellow">全部商品目录</a>
        </div>
        <div id="search">
            <span>Search</span>
            <input type="text">
            <input type="image" src="images/searchbutton.gif">
        </div>
        <div id="content">
            <div id="content_top">
                <span>首页&nbsp;&gt;&nbsp;旅游&nbsp;&gt;&nbsp;图书列表</span>
            </div>
            <div id="content_bottom">
                <h1>商品目录</h1><hr/>
                <h1>计算机类</h1><span>共100种商品</span><hr/>
                <div>
                    <div id="productlist">
                        <div id="productlist_image"><img src="images/productlist.gif"></div>
                        <div id="booklist">
                            <div class="book">
                                <div class="book_image"><img src="bookcover/101.jpg"></div>
                                <div class="book_introduction">书名：xxx<br>价格：xxx</div>
                            </div>
                            <div class="book">
                                <div class="book_image"><img src="bookcover/102.jpg"></div>
                                <div class="book_introduction">书名：xxx<br>价格：xxx</div>
                            </div>
                            <div class="book">
                                <div class="book_image"><img src="bookcover/103.jpg"></div>
                                <div class="book_introduction">书名：xxx<br>价格：xxx</div>
                            </div>
                            <div class="book">
                                <div class="book_image"><img src="bookcover/104.jpg"></div>
                                <div class="book_introduction">书名：xxx<br>价格：xxx</div>
                            </div>
                            <div class="book">
                                <div class="book_image"><img src="bookcover/105.jpg"></div>
                                <div class="book_introduction">书名：xxx<br>价格：xxx</div>
                            </div>
                            <div class="book">
                                <div class="book_image"><img src="bookcover/106.jpg"></div>
                                <div class="book_introduction">书名：xxx<br>价格：xxx</div>
                            </div>
                            <div class="book">
                                <div class="book_image"><img src="bookcover/107.jpg"></div>
                                <div class="book_introduction">书名：xxx<br>价格：xxx</div>
                            </div>
                            <div class="book">
                                <div class="book_image"><img src="bookcover/euro.jpg"></div>
                                <div class="book_introduction">书名：xxx<br>价格：xxx</div>
                            </div>
                        </div>
                        <div class="clear"></div>
                        <div id="jumppage">
                            <a href="#">上一页</a>
                            <a class="currentpage" href="#">1</a>
                            <a href="#">2</a>
                            <a href="#">3</a>
                            <a href="#">4</a>
                            <a href="#">5</a>
                            <a href="#">6</a>
                            <a href="#">7</a>
                            <a href="#">下一页</a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div id="bottom">
            <div id="bootom_left"><img src="images/logo.png"></div>
            <div id="bootom_right">
                <span>CONTACT US</span><br/>
                <span>copyright 2021 &copy; BookStore All Rights RESERVED</span>
            </div>
        </div>
    </div>
</body>
</html>

页面效果：

猜你喜欢

转载自blog.csdn.net/weixin_39478524/article/details/114170326
今日推荐
美国拟限制 AI 大模型出口中国和俄罗斯
苹果将与 OpenAI 达成协议，将 ChatGPT 应用于 iPhone
openKylin 社区生态委员会第六次会议圆满召开
阿里云正式发布通义千问 2.5
Python 3.13 发布首个 Beta：实验性自由线程模式和 JIT、改进交互式解释器
Stack Overflow 拿我的代码去训练 AI 大模型，还封了我的账号
Pop!_OS 的 COSMIC 桌面完成 App Store 上架工作
报告：Django 仍然是 74% 开发者的首选
《2024 年一季度互联网投融资运行情况》研究报告
15 年前上了“FFmpeg 耻辱柱”，今天他还得谢谢咱——腾讯QQPlayer一雪前耻？
TIOBE 5 月榜单：Fortran “复活”进入 Top 10
GCC 14.1 发布
周排行
curl的POST请求，封装方法
8.1.1. Integer Types
Java基础 Day05(个人复习整理)
Python - Django - 中间件 process_exception
小L的试卷
【Shell编程】 （函数）判断用户是否存在
python(css样式)
spring ant path 匹配原则 - 【笔记】
《JavaScript与JScript从入门到精通》(美)James.Jaworski.中译本.扫描版.pdf
Eclipse运行带参数的java程序
每日归档
更多
2024-05-12(0)
2024-05-11(38)
2024-05-10(38)
2024-05-09(35)
2024-05-08(42)
2024-05-07(14)
2024-05-06(40)
2024-05-05(0)
2024-05-04(7)
2024-05-03(19)

代码天地 © 2018 codetd.com

境外服务器   最新电视剧2022