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>