一、css简介
CSS (层叠样式表层叠样式表(英文全称:Cascading Style Sheets)是 一种用来表现HTML(标准通用标记语言的一个应用)或XML(标准通用标 记语言的一个子集)等文件样式的计算机语言。CSS不仅可以静态地修饰网 页,还可以配合各种脚本语言动态地对网页各元素进行格式化。
CSS 能够对网页中元素位置的排版进行像素级精确控制,支持几乎所有的字体字号样式,拥有对网页对象和模型样式编辑的能力。
二、javaweb入门前章内容
1.javaweb入门1.html
2.Javaweb入门2之HTML(table 、form)
三、本文用到的单词
link: 链接
font: 字体
background: 背景
type类型
margin: 边缘
padding: 填充
position: 位置
absolute: 绝对的
relative : 相对的
stylesheet: 样式表
四、css写入的位置
在html的 在这里写css代码
中间写代码
五、css语法
选择器指向您需要设置样式的 HTML 元素。如 h1、p、div等
每条声明都包含一个 CSS 属性名称和一个值,以冒号分隔。
多条 CSS 声明用分号分隔,声明块用花括号括起来。
5.1.1、 实列:
六、css常用的选择器的分类
我们可以将 CSS 选择器分为五类:
简单选择器(根据名称、id、类来选取元素)
组合器选择器(根据它们之间的特定关系来选取元素)
伪类选择器(根据特定状态选取元素)
伪元素选择器(选取元素的一部分并设置其样式)
属性选择器(根据属性或属性值来选取元素)
6.1.0 简单选择器
6.1.1、名称类型
p{/*p表示标签 表示所有p标签都遵循大括号的规则*/ color: red; } 对应的就是html的所有<p>标签 body{ margin:0px; padding: 0px; } 对应的就是html的所有<body>标签 对应的还有 <h> <div> 等等
6.1.2、类样式
以点(.)开头 后面跟类名
如我有一个类叫 f20
.f20{ font-size: 20px; color: red; }
这种最前有 . 的就是类选择器对应的是所有带有 class=“f20”
6.1.3id选择器
以井号(#)开头,后跟该元素的 id。
6.1.4、总结代码机器效果:
1.html部分
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <style type="text/css"> /*注释style标签内是CSS环境,可以写css代码。*/ /*标签样式表*/ /* 1.为啥需要CSS 2.css的分类:标签样式表、类样式表、id样式表 组合样式表。 3.位置分类 ,嵌入式(在标签内部以属性的方式存在)、内部(被style包裹)、 停用外部的css */ </style> <link rel="stylesheet" href="day_css01.css"> <title></title> </head> <body> <p>这里是红色1</p> <p>这里是红色2</p> <p class="f20">这里是红色3</p> <p id=p4>这里是红色4</p> <div> <p style="font-size: 60px;"><span>你好</span></p> <span style="font-size: 60px;">世界</span> <p>!!!!</p> </div> </body> </html>
css部分
p{/*p表示标签 表示所有p标签都遵循大括号的规则*/ color: red; } /*有点这是类样式*/ .f20{ font-size: 20px; color: blue; } /*#表示id样式*/ #p4{ color:deepskyblue; background-color: red; } div p{ color: #00BFFF; }
效果:
上面的代码你可能会好奇 两个文件是怎么链接起来的接下来就是链接部分