本文主要是介绍Java基础入门day34，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！
day34
CSS
基本概念
cascade style sheet： 层叠样式表
是一种用来表现html或xml等文件样式的计算机语言，CSS可以修饰静态的网页，也可以配合各种动态脚本语言对网页元素进行格式化操作
多个层叠样式表可以覆盖或者叠加，如果不同的CSS样式对于同一个html元素进行修饰，不同属性兼顾，相同属性选择优先级最高的展示
作用：
修饰美化html页面
外部样式表可以提高代码的复用性从而提高工作效率
html可以实现内容和样式的分离，便于后期的维护
书写规范：
CSS规则由两个主要部分构成：
选择器：同时是需要改变样式的html元素
样式规则：由属性和属性值构成，用来设置选择器的样式效果的
基础语法：
选择器 {属性：属性值； 属性2： 属性值2; ....}
注意事项：
使用花括号来包围属性属性值对
如果有若干个单词，则要给值添加引号
多个声明之间使用分号分隔
css对于大小写不敏感，如果涉及到与html文档一起使用，class和id名称对大小写敏感
三种方式
行内方式
把css样式嵌入到html标签中，用style属性来引入，类似于属性的用法
行内样式表只对当前标签有效
<div style="color: blue; font-size: 60px;">this is my div.</div><!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title> </head> <body><div style="color: blue; font-size: 60px;">this is my div01.</div><div>this is my div02.</div> </body> </html>内部方式
在页面的head中添加style标签来引入css
使用选择器可以选择当前页面所有的符合选择器规则元素
作用范围为当前整个页面
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>div{color: blue;font-size: 60px;} p{color: red;font-size: 60px;font-family: '楷体';}</style> </head> <body><div>this is my div01.</div><div>this is my div02.</div><p>this is p1</p><p>this is p2</p><p>this is p3</p> </body> </html>外部方式
将css样式单独写一个css样式文件，使用者直接引入该文件来设置样式效果
作用范围是任何引用了当前css文件的所有页面
引入外部文件的方式有两种
link标签
style标签中使用@import导入样式文件
link与import区别：link支持所有浏览器，import是等待html加载完成才加载， import不支持js动态修改
body{background-color: gray;background-image: url('https://t7.baidu.com/it/u=1321325680,1874527231&fm=193&f=GIF'); }<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><link rel="stylesheet" href="css/all.css" /> </head> <body><div style="color: blue; font-size: 60px;">this is my div01.</div><div>this is my div02.</div> </body> </html><!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title> <style>@import url("css/all.css");div{color: blue;font-size: 60px;} p{color: red;font-size: 60px;font-family: '楷体';}</style> </head> <body><div>this is my div01.</div><div>this is my div02.</div><p>this is p1</p><p>this is p2</p><p>this is p3</p> </body> </html>样式选择：
如果同时存在行内样式表、内嵌样式表和外部样式表同时修饰同一个元素：
如果属性不同，各自都会起作用
如果属性相同，按照优先级顺序来显示，行内> 内嵌 > 外部
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title> <style>@import url("css/all.css"); body{background-image: url("https://t7.baidu.com/it/u=698732052,3098959165&fm=193&f=GIF");} p{font-family: '楷体';}</style> </head> <body style="background-image: url('https://t7.baidu.com/it/u=1601818467,4473372&fm=193&f=GIF');"> <p>this is a p1.</p><p style="color: brown;">this is a p2.</p><p>this is a p3.</p>this is default font. </body> </html>
css选择器
主要用作选择需要添加样式规则的元素
基本选择器
元素选择器/标签选择器，直接使用标签本身来选择元素
id选择器，元素添加id属性，样式选择使用#id值来进行选择，如果页面中有多个相同id的元素，也可以被选择渲染
类选择器，让不同元素定义class属性，样式选择器使用.类样式名来进行元素的选择，可以实现跨标签选择不同的元素
属性选择器
根据元素的属性以及属性值来选择元素
html标签[属性]， 选择指定属性的html标签，input[type]，含有type属性的所有的input元素
html标签[属性='属性值']，选择指定属性为属性值的html标签，input[type="text"]，是选择type为text的所有的input元素
伪元素选择器：主要针对于a标签元素
link
hover
visited
active
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title> <style>a:link{ /*未访问过的链接*/color: red;} a:hover{ /*鼠标悬浮的链接*/color: blue;}a:visited{ /*访问过的链接*/color: green;}a:active{ /*鼠标点击的链接*/color: yellow;}</style> </head> <body><a href="#a1">this is a1</a><a href="#a2">this is a2</a><a href="#a3">this is a3</a><a href="#a4">this is a4</a> </body> </html>
CSSS属性
文字属性
| 属性名 | 取值 | 描述 |
|---|---|---|
| font-size | 数值 | 设置文字大小 |
| font-family | 黑体，宋体，楷体 | 设置字体样式 |
| font-style | normal，italic斜体 | 设置斜体样式 |
| font-weight | 100-900的取值，bold，bolder | 粗体样式 |
文本属性
属性名 取值 描述 color 任何表示颜色的单词或者#rrggbb 设置文本颜色 text-indent 像素或者百分比 设置文本缩进 text-decoration none, underline;overline;blink 设置装饰线 text-align left，center，right 文本对齐方式 word-spacing normal, 固定值 单词之间的间隔 line-height normal,固定值 设置文本的行高 <!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>p{color: red;font-size: 48px;}#p2{text-indent: 20px;}#p3{text-indent: 20%;}#p4{text-indent: -20px;}</style> </head> <body><p id="p1">this is a p1.</p><p id="p2">this is a p2.</p><p id="p3">this is a p3.</p><p id="p4">this is a p4.</p> </body> </html><!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>#a1{text-decoration: none;}#a2{text-decoration: underline;}#a3{text-decoration: overline;}#a4{text-decoration: line-through;}#a5{text-decoration: blink;}</style> </head> <body><a href="#a1" id="a1">this is a1</a><a href="#a2" id="a2">this is a2</a><a href="#a3" id="a3">this is a3</a><a href="#a4" id="a4">this is a4</a><a href="#a5" id="a4">this is a5</a> </body> </html><!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>div{width: 200px;height: 200px;}#div01{background-color: red;line-height: 0px;}#div02{background-color: blue;line-height: 200px;}#div03{background-color: green;line-height: 400px;}</style> </head> <body><div id="div01">this is div01</div><div id="div02">this is div02</div><div id="div03">this is div03</div> </body> </html>
背景属性
属性名 取值 描述 background-color #rrggbb或者颜色单词 设置背景颜色 background-image url('图片路径') 设置背景图片 background-repeat repeat，repeat-x，repeat-y,no-repeat 背景图片的平铺方向 <!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>body{background-image: url('https://t7.baidu.com/it/u=2291349828,4144427007&fm=193&f=GIF');background-repeat: repeat-y;}</style> </head> <body><img src="https://t7.baidu.com/it/u=3712912701,3428856092&fm=193&f=GIF" alt=""><img src="https://t7.baidu.com/it/u=3712912701,3428856092&fm=193&f=GIF" alt=""><img src="https://t7.baidu.com/it/u=3712912701,3428856092&fm=193&f=GIF" alt=""><img src="https://t7.baidu.com/it/u=3712912701,3428856092&fm=193&f=GIF" alt=""><img src="https://t7.baidu.com/it/u=3712912701,3428856092&fm=193&f=GIF" alt=""><img src="https://t7.baidu.com/it/u=3712912701,3428856092&fm=193&f=GIF" alt=""><img src="https://t7.baidu.com/it/u=3712912701,3428856092&fm=193&f=GIF" alt=""><img src="https://t7.baidu.com/it/u=3712912701,3428856092&fm=193&f=GIF" alt=""> </body> </html>
css盒子模型
三个属性
margin： 外边距
border： 边框
padding：内边距
四个方向：
默认按照上右下左的次序设置
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>table{border: 10px dashed gray;margin: 50px;}td{background-color: red;border: 10px dotted blue;padding: 100px 50px ;}#td04{padding-top: 10px;padding-left: 30px;padding-bottom: 20px;padding-right: 40px;}</style> </head> <body><table><tr><td>element01</td><td>element02</td></tr><tr><td>element03</td><td id="td04">element04</td></tr></table> </body> </html>
这篇关于Java基础入门day34的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！
