java基础57 css样式、选择器和css定位（网页知识）

本文知识点（目录）：

    1、CSS样式
    2、选择器
    3、CSS定位

1、CSS样式

    1.html 在一个网页中负责的是一个页面的结构
    2.css(层叠样式表)在一个页面中负责了一个页面的样式.

css文档（教程）：http://www.w3school.com.cn/css/index.asp

1.1、编写css代码的方式

第一种方式：在style标签中编写css代码。  缺点：只能用于本页中复用性不强.

     格式:
         <style type="text/css">            编写css的代码
         </style>

第二种方式：可以引入外部的css文件（推荐使用）
    方式1：使用link标签

    格式：<link href="css文件的路径" rel="stylesheep"/>

    方式2:使用style引入

    格式:<style type="text/css">@import url(路径);</style>           

第三种方式：直接在html标签中使用style属性编写。   缺点：只能本标签中，复用性较差，不推荐使用  

1.2、实例

 1 <!doctype html>
 2 <html>
 3 <head>
 4 <meta charset="utf-8">
 5 <title>css样式练习</title>
 6 </head>
 7 <!--
 8 html 在一个网页中负责的是一个页面的结构
 9 css(层叠样式表)在一个页面中负责了一个页面的样式.
10 编写css代码的方式
11 第一种方式:在style标签中编写css代码.  缺点：只能用于本页中复用性不强.
12     
13     格式:
14         <style type="text/css">
15             编写css的代码
16         </style>
17 
18 第二种方式: 可以引入外部的css文件（推荐使用）
19     方式1:使用link标签
20     格式:<link href="css文件的路径" rel="stylesheep"/>
21         
22     方式2:使用style引入
23     格式:
24         <style type="text/css">
25             @import url(路径);
26         </style>
27             
28 第三种方式:直接在html标签中使用style属性编写. 缺点：只能本标签中,复用性较差,不推荐使用
29 -->
30 <!-- 第一种 -->
31 <style type="text/css">
32      a{
33          color:#00FF00;
34         text-decoration:none;/* 去掉下划线 */
35         font-size:24px;
36      }
37      div{
38          text-align:center;
39      }
40 </style>
41 
42 <!-- 第二种：方式1-->
43 <link href="css1.css" rel="stylesheet"/>
44 <!-- 第二种：方式2-->
45 <style type="text/css">
46     @import url("css1.css");
47 </style>
48 
49 <body>
50     <div>      <!-- 第三种 -->
51         <a href="#" style="color:#0000FF ">新闻标题1</a>&nbsp;&nbsp;&nbsp;
52         <a href="#">新闻标题2</a>&nbsp;&nbsp;&nbsp;
53         <a href="#">新闻标题3</a>&nbsp;&nbsp;&nbsp;
54         <a href="#">新闻标题4</a>&nbsp;&nbsp;&nbsp;
55         <a href="#">新闻标题5</a>&nbsp;&nbsp;&nbsp;
56     </div>
57 </body>
58 </html>

下面是导入css1.css文件后的效果图

 1.3、附录（小知识点）：        下面相关属性的详细解析：http://www.w3school.com.cn/css/index.asp

 1 （小知识1）
 2 <style type="text/css">
 3     table{
 4         background-color:#00FF00;/*背景颜色*/
 5         border-color:#000000;/*边框颜色*/
 6     }
 7     th:hover{/*当有鼠标悬停在链接上的时候，就变颜色*/
 8         background-color:#FF0000;
 9     }
10 </style>
11 
12 （小知识2）
13 <style type="text/css">
14     body{
15         background-image:url(newscreen2152439.jpg);/*背景图片*/
16         background-repeat:no-repeat;/*背景重复（比如，一张小的背景图放到网页上，默认情况下是铺满整个屏幕的，可用此属性去掉重复的，只剩一张，即：不用铺满屏幕）*/
17         background-position:500px 10px;/*背景位置（设置背景图的位置）*/
18     }
19     div{
20         margin-left:560px;/*边缘离左边多远（即：左往右移动多远的距离）*/
21         margin-top:272px;/*边缘离头部多远（即：上往下移动多远的距离）*/
22         color:#CCFF00;/*颜色*/
23         text-decoration:none;;/*文字修饰*/
24         text-transform:uppercase;;/*是字母改变成...样（比如：小写字母变成了大写字母）*/
25     }
26     span{
27         margin-left:58px;
28     }
29 </style>
30 
31 （小知识3）
32 <style type="text/css">
33     table{
34         border-collapse:collapse;/*作用：使表格中的单元格间的距离为零（即：最终效果是合成了一条线）*/
35         /*border-spacing:20px;*/ /*设置单元格间距的大小*/
36         caption-side:top;/*标题的位置*/
37         table-layout:fixed;/*表格排版*/
38         border-style:dashed solid double;/*边框样式*/
39         border-bottom-color:#99FF00;/*边框底部的颜色*/
40     }
41 </style>

 

2、选择器

选择器：选择器的作用就是找到对应的数据进行样式化

1.标签选择器：找到所有的指定标签进行格式化

格式:标签名{样式1,样式2.......}

2.类选择器：使用类选择器首先要给html标签指定对应的class属性值

格式:.class属性值{样式1:样式2........} 

3.ID选择器：首先个给html元素添加一个id属性值

格式:#id属性值{样式1:样式2........}

4.交集选择器：就是对选择1中的选择器2里面的数据经行样式化

格式:选择器1 选择器2{样式1,样式......}

5.并集选择器

格式:选择器1,选择器2{样式1,样式2.....}

6.通配选择器:

格式：
   *{样式1,样式2....}

7.伪类选择器：伪类选择器就是对元素处于某种状态下进行样式的

 1 <!doctype html>
 2 <html>
 3 <head>
 4 <meta charset="utf-8">
 5 <title>选择器的练习</title>
 6 </head>
 7 <style type="text/css">
 8 /*
 9 伪类选择器:伪类选择器就是对元素处于某种状态下进行样式的
10 */
11 a:link{color: #CCFF00}/*没点击时的颜色*/
12 a:visited{color:#3300CC}/*已经点击过的颜色*/
13 a:hover {color: #FF00FF}/*鼠标悬停在链接上的颜色*/
14 a:active {color:#00FFFF}/*被选定的链接的颜色(按住不放)*/
15 </style>
16 
17 <body>
18     <a href="#">百度</a>
19 </body>
20 </html>

2.1选择器要注意的事项

    1.html元素的选择器属性值一定不能以数字开头的.
    2.类选择器的样式要优先于标签选择器的样式
    3.id选择器优先级最高,优先于标签选择器与类选择器
    4.ID选择器属性值只能在html页面中出现一次
【ID选择器 > 类选择器 > 标签选择器】

2.2、实例

 1 <!doctype html>
 2 <html>
 3 <head>
 4 <meta charset="utf-8">
 5 <title>选择器的练习</title>
 6 </head>
 7 <style type="text/css">
 8 /*
 9     div{
10       font-size:36px;
11     }
12     
13     .one{
14        font-size:9px;
15     }
16     
17     #two{
18        font-size:18px;
19     }
20     
21     div span{
22         font-size:30px;
23         div,span{
24             font-size:30px;
25         }
26     }*/
27     
28     *{
29       font-size:36px;
30     }
31     
32 </style>
33 <body><!-- .one：class  #two：id -->
34      <div class="one">这个是<span>这是我的一个div标签</span></div>
35      <div id="two">这是我的二个div标签</div>
36 
37 </body>
38 </html>

 

3、CSS定位

3.1、CSS的三种常用定位

    相对定位：相对应元素原本的位置进行移动
        position:relative
    
    绝对定位：相对应整个页面而言的
            position:absolute;
            
    固定定位：相对应整个页面来说的
            position:fixed;   

3.2、实例

 1 <!doctype html>
 2 <html>
 3 <head>
 4 <meta charset="utf-8">
 5 <title>css定位的练习</title>
 6 </head>
 7 <style type="text/css">
 8 /*
 9 css的定位:
10     相对定位:相对应元素原本的位置进行移动
11         position:relative
12     
13     绝对定位:相对应整个页面而言的
14             position:absolute;
15             
16     固定定位:相对应整个页面来说的
17             position:fixed;    
18 */
19     div{
20         border-style:solid;/*边框样式（solid：实线）*/
21         width:100px;
22         height:100px;
23     }
24     .one{
25         background-color:#0000FF;
26     }
27     .two{
28         background-color:#00FF00;
29         position:relative;/*相对定位*/
30         /*position:absolute;*//*绝对定位*/
31         top:10px;
32         left:20px;
33     }
34     .three{
35         background-color:#FFFF00;
36 position:absolute;
37 top:220px;
38     }
39     #ad{
40         position:fixed;/*固定定位*/
41         top:640px;
42         left:1670px;
43     }
44 </style>
45 <body>
46     <div class="one">one</div>
47     <div class="two">two</div>
48     <div class="three">three</div>
49     
50     <div id="ad">
51         <img src="1885.jpg" height="320" width="240"/>
52     </div>
53 </body>
54 </html>

实例效果图

　　　　　　　　　　　　

 

 

 

 

 

 

 

原创作者：DSHORE

作者主页：http://www.cnblogs.com/dshore123/

原文出自：https://www.cnblogs.com/dshore123/p/9379125.html

欢迎转载，转载务必说明出处。（如果本文对您有帮助，可以点击一下右下角的 推荐，或评论，谢谢！）

 

G
M
T
检测语言世界语中文简体中文繁体丹麦语乌克兰语乌兹别克语乌尔都语亚美尼亚语伊博语俄语保加利亚语信德语修纳语僧伽罗语克罗地亚语冰岛语加利西亚语加泰罗尼亚语匈牙利语南非祖鲁语卡纳达语卢森堡语印地语印尼巽他语印尼爪哇语印尼语古吉拉特语吉尔吉斯语哈萨克语土耳其语塔吉克语塞尔维亚语塞索托语夏威夷语威尔士语孟加拉语宿务语尼泊尔语巴斯克语布尔语(南非荷兰语)希伯来语希腊语库尔德语弗里西语德语意大利语意第绪语拉丁语拉脱维亚语挪威语捷克语斯洛伐克语斯洛文尼亚语斯瓦希里语旁遮普语日语普什图语格鲁吉亚语毛利语法语波兰语波斯尼亚语波斯语泰卢固语泰米尔语泰语海地克里奥尔语爱尔兰语爱沙尼亚语瑞典语白俄罗斯语科萨科西嘉语立陶宛语索马里语约鲁巴语缅甸语罗马尼亚语老挝语芬兰语苏格兰盖尔语苗语英语荷兰语菲律宾语萨摩亚语葡萄牙语蒙古语西班牙语豪萨语越南语阿塞拜疆语阿姆哈拉语阿尔巴尼亚语阿拉伯语韩语马其顿语马尔加什语马拉地语马拉雅拉姆语马来语马耳他语高棉语齐切瓦语 世界语中文简体中文繁体丹麦语乌克兰语乌兹别克语乌尔都语亚美尼亚语伊博语俄语保加利亚语信德语修纳语僧伽罗语克罗地亚语冰岛语加利西亚语加泰罗尼亚语匈牙利语南非祖鲁语卡纳达语卢森堡语印地语印尼巽他语印尼爪哇语印尼语古吉拉特语吉尔吉斯语哈萨克语土耳其语塔吉克语塞尔维亚语塞索托语夏威夷语威尔士语孟加拉语宿务语尼泊尔语巴斯克语布尔语(南非荷兰语)希伯来语希腊语库尔德语弗里西语德语意大利语意第绪语拉丁语拉脱维亚语挪威语捷克语斯洛伐克语斯洛文尼亚语斯瓦希里语旁遮普语日语普什图语格鲁吉亚语毛利语法语波兰语波斯尼亚语波斯语泰卢固语泰米尔语泰语海地克里奥尔语爱尔兰语爱沙尼亚语瑞典语白俄罗斯语科萨科西嘉语立陶宛语索马里语约鲁巴语缅甸语罗马尼亚语老挝语芬兰语苏格兰盖尔语苗语英语荷兰语菲律宾语萨摩亚语葡萄牙语蒙古语西班牙语豪萨语越南语阿塞拜疆语阿姆哈拉语阿尔巴尼亚语阿拉伯语韩语马其顿语马尔加什语马拉地语马拉雅拉姆语马来语马耳他语高棉语齐切瓦语     
文本转语音功能仅限200个字符
 选项 : 历史 : 反馈 : Donate关闭

转载于:https://www.cnblogs.com/dshore123/p/9379125.html

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.mzph.cn/news/266489.shtml

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

电子计算机场地通用规范_最全的视频监控系统施工规范要求

电子计算机场地通用规范_最全的视频监控系统施工规范要求

前言&#xff1a;今天我们一起来看下监控施工详细规范步骤。可以参考一下&#xff0c;有些东西可能不符合你的项目要求&#xff0c;但是都可以做删减正文&#xff1a;一、工程设计、验收标准《城市道路设计规范》 CJJ37-90《城市道路交通规划设计规范》GB50220-95 《道路交通标…
阅读更多...
Intent的一些用法

Intent的一些用法

2019独角兽企业重金招聘Python工程师标准>>> Intent用法实例 1.无参数Activity跳转 Java代码 Intent it new Intent(Activity.Main.this, Activity2.class); startActivity(it); 2.向下一个Activity传递数据&#xff08;使用Bundle和Intent.putExtras&#x…
阅读更多...
idea建立一个java工程_IntelliJ IDEA（三、各种工程的创建 -- 之一 -- 创建一个简单的Java工程）...

idea建立一个java工程_IntelliJ IDEA（三、各种工程的创建 -- 之一 -- 创建一个简单的Java工程）...

一、创建一个简单的Java工程&#xff1a;HelloWorld1. Eclipse的第一步是选择工作空间&#xff0c;然后创建项目&#xff1b;IDEA不同(没有工作空间的概念)&#xff0c;第一步就直接创建具体的项目&#xff0c;项目创建过程中会选择在本地的存储位置(本地的某个文件夹)。Eclips…
阅读更多...
5折交叉验证_数据集的划分——交叉验证法

5折交叉验证_数据集的划分——交叉验证法

本文作者&#xff1a;王 歌 文字编辑&#xff1a;戴 雯 技术总编&#xff1a;张 邯前面我们在举例时&#xff0c;通常是将所使用的数据集按照75%和25%的比例划分为训练集和测试集&#xff0c;这主要是为了我们举例方便&#xff0c;同时划分后的数据量也依然符合大样本的要求。其…
阅读更多...
思科CCIE认证知识点之IPv6地址

思科CCIE认证知识点之IPv6地址

IPv6是IETF&#xff08;互联网工程任务组&#xff0c;Internet Engineering Task Force&#xff09;设计的用于替代现行版本IP协议&#xff08;IPv4&#xff09;的下一代IP协议。 一、IPV6的地址&#xff1a; IPv6 地址共 128位&#xff0c;通过 8 个十六进制的地址块格式来…
阅读更多...
java部署平台_开源Java自动化部署平台JDeploy

java部署平台_开源Java自动化部署平台JDeploy

JDeploy是Java Shell实现的基于Linux系统的自动化、可视化的项目部署平台&#xff0c;能部署Java服务、Java Web项目&#xff0c;可以简化项目部署操作&#xff0c;无需繁琐的黑窗口SSH指令及Jenkins复杂的配置。传统部署方式&#xff1a;从SVN/GIT服务器检出代码->在IDE中…
阅读更多...
A*算法在最短路问题的应用及其使用举例

A*算法在最短路问题的应用及其使用举例

1 A*算法 A*算法在人工智能中是一种典型的启发式搜索算法&#xff0c;启发中的估价是用估价函数表示的&#xff1a; 其中f(n)是节点n的估价函数&#xff0c;g(n)表示实际状态空间中从初始节点到n节点的实际代价&#xff0c;h(n)是从n到目标节点最佳路径的估计代价。另外定义h(n…
阅读更多...
pytorch 使用cpu_想读读PyTorch底层代码？这份内核机制简介送给你

pytorch 使用cpu_想读读PyTorch底层代码？这份内核机制简介送给你

机器之心报道参与&#xff1a;思源学习 PyTorch 比较简单&#xff0c;但你能学习 PyTorch 内部机制吗&#xff1f;最近&#xff0c;有 14 年 ML 经验的大神 Christian 介绍了 PyTorch 的内核机制。虽然在实际使用中并不需要这些知识&#xff0c;但探索 PyTorch 内核能大大提升我…
阅读更多...
java web 自定义标签_JavaWeb学习——自定义标签

java web 自定义标签_JavaWeb学习——自定义标签

自定义标签一、自定义标签概述使用标准JSP访问、操作JavaBean&#xff0c;是实现展现(HTML)与业务实现(Java代码)分离的第一步。然而&#xff0c;标准方法功能不够强大&#xff0c;以至于开发者无法仅仅使用它们开发应用&#xff0c;还要在JSP页面中使用Java代码。介于JavaBean…
阅读更多...
739. Daily Temperatures - LeetCode

739. Daily Temperatures - LeetCode

Question 739. Daily Temperatures Solution 题目大意&#xff1a;比今天温度还要高还需要几天 思路&#xff1a;笨方法实现&#xff0c;每次遍历未来几天&#xff0c;比今天温度高&#xff0c;就坐标减 Java实现&#xff1a; public int[] dailyTemperatures(int[] temperatur…
阅读更多...
Android 抽屉效果Demo

Android 抽屉效果Demo

2019独角兽企业重金招聘Python工程师标准>>> Android 抽屉效果Demo。 转载:http://www.adobex.com/android/source/details/00000110.htm 转载于:https://my.oschina.net/androidcode/blog/103821
阅读更多...
DIV中文字不换行解决办法

DIV中文字不换行解决办法

解决办法如下&#xff1a;word-wrap &#xff1a; normal | break-word设置或检索当当前行超过指定容器的边界时是否断开转行。normal&#xff1a;控制连续文本换行。break-word&#xff1a;内容将在边界内换行。如果需要&#xff0c;词内换行&#xff08;word-break&#xff0…
阅读更多...
python竞赛试题及答案_竞赛信息 | 蓝桥杯大赛Python组

python竞赛试题及答案_竞赛信息 | 蓝桥杯大赛Python组

蓝桥杯大赛 青少年创意编程Python组 竞赛规则及样题 — 竞赛规则 — 1 竞赛时长 Python编程组竞赛的选拔赛、省赛及国赛&#xff0c;竞赛时长均为120分钟&#xff0c;详细赛程安排另行通知。 2 竞赛形式 竞赛形式为个人赛&#xff0c;一人一机。 选手须自带笔记本计算机&#x…
阅读更多...
Civil 3D 中使用COM API导入DEM数据创建曲面

Civil 3D 中使用COM API导入DEM数据创建曲面

Civil 3D提供的基于.net的API和基于COM的API&#xff0c;现在推荐大家使用.net API,但有时也需要使用COM API。 这个例子演示如何使用COM API来导入DEM数据生成Civil 3D曲面。 Civil 3D开发中使用COM API需要添加的引用比较啰嗦&#xff0c;建议使用向导创建项目简化操作&#…
阅读更多...
牛客网第4场A

牛客网第4场A

链接&#xff1a;https://www.nowcoder.com/acm/contest/142/A 来源&#xff1a;牛客网题目描述 A ternary string is a sequence of digits, where each digit is either 0, 1, or 2. Chiaki has a ternary string s which can self-reproduce. Every second, a digit 0 is i…
阅读更多...
谈谈NiTE 2手部跟踪在彩色图像上的显示

谈谈NiTE 2手部跟踪在彩色图像上的显示

主要内容&#xff1a; NiTE2手部跟踪流程代码演示总结一、NiTE2手部跟踪流程 我自己都感觉到天天在重复着相同的代码&#xff0c;但我觉得没什么不好的&#xff0c;对于新东西的学习只有在重复再重复的过程中&#xff0c;才能积累经验&#xff0c;较少犯“低级错误”的几率&…
阅读更多...
java 应用是单机集群_【架构】Tomcat单机部署多应用Windows

java 应用是单机集群_【架构】Tomcat单机部署多应用Windows

Tomcat单机部署多应用-Windows1、添加新增的Tomcat相关环境变量CATALINA_BASE C:\tomcat1CATALINA_HOME C:\tomcat1TOMCAT_HOME C:\tomcat1CATALINA_2_BASE C:\tomcat2CATALINA_2_HOME C:\tomcat2TOMCAT_2_HOME C:\tomcat22、第一个tomcat不变3、打开第二个tomcat目录bin…
阅读更多...
java long类型转string_JavaSE的学习——数据类型

java long类型转string_JavaSE的学习——数据类型

数据类型分为基本数据类型和引用数据类型两大类在下面数据类型的介绍中只会介绍8种基本数据类型和引用数据类型中的类类型中的一个类String基本数据类型1. 计算机中的存储单位8bit 1byte 1024byte 1KB 1024KB 1M1024M 1GB1024GB 1T2. 整数型数据byte short int long1.long…
阅读更多...
DWTagList

DWTagList

2019独角兽企业重金招聘Python工程师标准>>> DWTagList 根据给定的 NSArray 数组来创建标签列表&#xff0c;可自定义字体、颜色和其他属性。 转载:http://www.adobex.com/ios/source/details/00000820.htm 转载于:https://my.oschina.net/u/868244/blog/106245
阅读更多...
爬虫（爬虫原理与数据抓取）

爬虫（爬虫原理与数据抓取）

通用爬虫和聚焦爬虫 根据使用场景&#xff0c;网络爬虫可分为 通用爬虫 和 聚焦爬虫 两种. 通用爬虫 通用网络爬虫 是 捜索引擎抓取系统&#xff08;Baidu、Google、Yahoo等&#xff09;的重要组成部分。主要目的是将互联网上的网页下载到本地&#xff0c;形成一个互联网内容的…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023