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

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

阅读量：4310 次

发布时间：2019-06-06

本文共 2719 字，大约阅读时间需要 9 分钟。

本文知识点（目录）：

1、CSS样式

1.html 在一个网页中负责的是一个页面的结构

2.css(层叠样式表)在一个页面中负责了一个页面的样式.

css文档（教程）：

1.1、编写css代码的方式

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

格式:

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

方式1：使用link标签

格式：

方式2:使用style引入

格式:

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

1.2、实例

1  2  3  4 
      5 css样式练习 6  7 
     30 
     31 41 42 
     43 
     44 
     45 48 49 50     
           
      51         
      新闻标题1   52         
      新闻标题2   53         
      新闻标题3   54         
      新闻标题4   55         
      新闻标题5   56     
     
57 58

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

1.3、附录（小知识点）：下面相关属性的详细解析：

1 （小知识1） 2 11 12 （小知识2）13 30 31 （小知识3）32

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  2  3  4 
      5 选择器的练习 6  7 16 17 18     百度19 20

2.1选择器要注意的事项

1.html元素的选择器属性值一定不能以数字开头的.

2.类选择器的样式要优先于标签选择器的样式

3.id选择器优先级最高,优先于标签选择器与类选择器

4.ID选择器属性值只能在html页面中出现一次

【ID选择器 > 类选择器 > 标签选择器】

2.2、实例

1  2  3  4 
      5 选择器的练习 6  7 33 
     34      
     
      这个是
      这是我的一个div标签
     
35      
     
      这是我的二个div标签
     
36 37 38

3、CSS定位

3.1、CSS的三种常用定位

相对定位：相对应元素原本的位置进行移动

position:relative

绝对定位：相对应整个页面而言的

position:absolute;

固定定位：相对应整个页面来说的

position:fixed;

3.2、实例

1  2  3  4 
      5 css定位的练习 6  7 45 46     
     
      one
     
47     
     
      two
     
48     
     
      three
     
49     50     
     
      51         
      52     
     
53 54

实例效果图

原创作者：

作者主页：

原文出自：

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

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

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