JavaWeb第二天--CSS
CSS
CSS简述
- CSS是什么？有什么作用？
CSS(Cascading Style Sheets)：层叠样式表。
CSS通常称为CSS样式或层叠样式表。主要用于设置HTML页面中的文本内容（字体、大小、对齐方式等）、图片的外形（宽度、边框样式、边距等）以及版式的布局等外观显示样式。
CSS可以使HTML页面更好看，CSS色系的搭配可以让用户更舒服，CSS+DIV布局更加灵活，更容易绘制出用户需要的结构。
CSS的代码规范
- 放置规范
在<style>标签内容体中书写CSS样式代码，<style>标签放置在标签中。 - 格式规范
选择器名称 {属性名:属性值; 属性名:属性值;......}
选择器：即指定CSS样式作用在哪些HTML标签上。
- 代码规范
- 属性名和属性值之间是键值对关系。
- 属性名和属性值之间用”:“连接，最后”;“结尾。（例如：font-size:10px）
- 如果一个属性名有多个值，多个值之间用空格隔开。（例如：border:5px solid red;）
- CSS注释：/*注释内容*/
<!DOCTYPE html>
<html>
<head>
<title></title>
<style>
span{
font-size:120px;
color:red;
border:1px solid blue;
}
</style>
</head>
<body>
<span>111</span>
<span>222</span>
</body>
</html>
CSS选择器
基本选择器
- 元素选择器
HTML标签又名HTML元素。
元素选择器：即以HTML标签名作为选择器名称。
作用：选择CSS样式代码，作用于对应标签上。
- 格式
标签名{ /*CSS样式代码*/ }- 适用范围：适用于将相同样式作用在多个同名标签上。
- 类选择器
每个HTML标签都有一个class属性，class属性值即为类名。
类选择器：即以HTML的类名（class属性值）作为选择器名称。
作用：选择CSS样式作为代码，作用于对应类名的HTML标签上。
- 格式：
.类名{ /*CSS样式代码*/ }- 使用范围：适用于将样式一次作用在相同类名的标签上。
- id选择器
每个HTML标签都有一个id属性，id的属性值必须在本页面是唯一的。
id选择器：即以HTML的id（id属性值）作为选择器名称。
作用：选择器CSS样式代码，作用于某个规定id值的HTML标签上。
- 格式：
#id值{ /*CSS样式代码*/ }
*适用范围：适用于将样式作用在某个标签上（更有针对性）。
<!DOCTYPE html>
<html>
<head>
<title></title>
<style>
span{
color:blue;
}
.div1{
border:1px solid red;
background-color:yellow;
}
#div2{
border:1px solid black;
background-color:green;
}
</style>
</head>
<body>
<span>行内标签<span>
<div class="div1">块级标签1<div>
<div id="div2">块级标签2<div >
</body>
</html>
基本选择器的组合方式
- 层级关系
标签和标签之间有层级关系，例如<html>标签中的子标签为<body>标签。
我们可以对基本选择器进行组合，表现出层级关系，从而更加针对性地把样式作用于某些标签上。
- 格式：
选择器1 选择器2 ......{ /*CSS样式代码*/ }
<!DOCTYPE html>
<html>
<head>
<title></title>
<style>
div font{
color:red;
}
</style>
</head>
<body>
<div>
<font>我想火</font>
</div>
<font>我想火火不了</font>
</body>
</html>
CSS样式
边框属性
- border
设置边框的样式
- 格式：宽度 样式 颜色。
（例如：1px solid red -> 1像素粗 实线 红色边框）
- width
用于设置标签的宽度。 - height
用于设置标签的高度。 - background-color
用于设置标签的背景颜色。
- 背景颜色设置的两种主流方式：
1.英文单词->例如：red;blue。yellow;
2.颜色代码->例如：#fff。(格式：#红绿蓝，每个颜色用两个16进制位数表示)
布局
- float
通常默认的排版方式，将页面中的元素从上到下一一罗列，而实际开发中，需要左右方向式进行排版，就需要使用浮动属性。
- 格式：
选择器{float:属性值;}- 常用属性值：
none:元素不浮动（默认值）。
left：元素向左浮动。
right：元素向右浮动。
注意事项：因为元素设置浮动属性后，会脱离原有文档流（会脱离原有的版式），从而会影响其他元素的样式，所以设置浮动后，页面样式需要重新调整。
<!DOCTYPE html>
<html>
<head>
<title></title>
<style>
#d1{
background-color:red;
width:100px;
height:100px;
float:left;
}
#d2{
background-color:green;
width:110px;
height:110px;
float:left;
}
#d3{
background-color:blue;
width:120px;
height:120px;
float:left;
}
</style>
</head>
<body>
<div id="d1"></div>
<div id="d2"></div>
<div id="d3"></div>
</body>
</html>
转换
- display
HTML提供丰富的标签，这些标签被定义成了不同的类型，一般分为：块级元素和行内元素。
- 块元素： 以区域块的方式出现，每个块标签独自占据一整行或多整行，块结束会自动换行。块结束会自动换行。
常见的块元素：<h1>、<p>、<div>、<ul>等。- 行内元素： 根据内容多少来占用行内空间，不会自动换行。
常见的行内元素：<span>、<a>等。
- display属性可以使得元素在行内元素和块元素之间相互转换。
- 格式：
选择器[display属性值]- 常用的属性值：
block：此元素将显示为块元素（块元素默认的display属性值）
inline：此元素将显示为行内元素（行内元素默认的display属性值）
none：此元素将被隐藏，不显示，也不占用页面空间。
<!DOCTYPE html>
<html>
<head>
<title></title>
<style>
div{
display:inline;
}
</style>
</head>
<body>
<div>变为行内元素</div>
<span>行内元素</span>
</body>
</html>
字体
- font-size
用于设置字体的大小。 - color
用于设置字体的颜色。
JavaWeb第二天--CSS的更多相关文章
- 第二部分----CSS的基础语法
PART-1 CSS的基础常识 一.什么是CSS? W3C标准中,倡导有3:其一为内容与表现分离,其二为内容与行为分离,其三为内容结构的语义化.其倡导中第一条的"表现"指的便可以说 ...
- HTML第二课——css【2】
请关注公众号:自动化测试实战 现在继续上一节课的内容,看下面代码: <!DOCTYPE html><html><head> <meta charset= ...
- 超全面的JavaWeb笔记day02<CSS&JavaScript>
1.CSS的简介 2.CSS概述和与HTML的结合方式(四种)(*******) 3.CSS的基本选择器(******) 4.CSS的扩展选择器(了解) 5.CSS的盒子模型(了解) 6.CSS的布局 ...
- JavaWEB开发02——CSS&JS
今日目标 使用CSS完成网站首页的优化 使用CSS完成网站注册页面的优化 使用JS完成简单的数据校验 使用JS完成图片轮播效果 教学目标: 了解CSS的概念 了解CSS的引入方式 了解CSS的基本用法 ...
- JavaWeb前端：CSS
CSS 主要是要熟悉的掌握选择器 Div 的盒模型: 整个网页被切割成一个一个盒子,盒子可以套盒子,每个盒子通过以下几个主要属性来控制显示位置: 边框 Border-top, Border-botto ...
- Html标签第二课css
css(Cascading Style Sheet)叠层样式表.用于控制网页样式并允许将样式信息与网页内容分离的一种标记性语言. 一:样式三种控制方法 1.行内样式: <div style=& ...
- 带你玩转JavaWeb开发之三 - CSS从基础到实战
一,什么是CSS? Cascading Style Sheets层叠样式表 层叠:就是层层覆盖叠加,如果有多种样式对同一html标签进行修饰,样式有冲突的部分应用优先级高,不冲突的 ...
- HTML第二部分 CSS样式表
CSS(cascading style sheets,层叠样式表),作用是美化HTML网页. /*注释*/ 注释语法 2.1 样式表的基本概念 2.1.1样式表的分类 1.内联样式表 和HTML联 ...
- web前端-----第二弹CSS
web前端之CSS样式 CSS 语法 CSS 规则由两个主要的部分构成:选择器,以及一条或多条声明. ''' selector { property: value; property: value; ...
随机推荐
- ActiveMQ消息可靠性-持久性
三个方面保证消息的可靠性 1.消息的持久 2.事物 3.签收 一:PERSISTENT:持久性 参数说明:1.持久 2.非持久 Java里面设置持久化和非持久 持久: 将持久性设置为持久 宕机 ...
- Docker Hello-World镜像运行测试
一.命令:docker run hello-world 命令解释:以docker客户端命令的方式运行hello-world镜像 命令运行结果: hadoop@Docker:/opt/docker$ d ...
- VMware Workstation创建Windows2012server虚拟机
镜像文件需要下载到物理机 3.需要输入iso文件 对应的密钥 定义普通的用户名与密码 4.指定按照路径 5. 大概都是下一步 根据提示需要重启 选择带GUI的服务器进行安装,因为windows命令行模 ...
- 使用Python3进行AES加密和解密 输入的数据
高级加密标准(英语:Advanced Encryption Standard,缩写:AES),在密码学中又称Rijndael加密法,是美国联邦政府采用的一种区块加密标准.这个标准用来替代原先的DES, ...
- GoogleHacking语法篇
常用GoogleHacking语法: 1.intext:(仅针对Google有效) 把网页中的正文内容中的某个字符作为搜索的条件 2.intitle: 把网页标题中的某个字符作为搜索的条件 3.cac ...
- vue响应数据的原理
vue最大的特点就是数据驱动视图. vue的数据改变,页面一定发生改变?不一定. 当操作引用类型的数据,动态添加属性时,页面不会发生改变. vue响应式数据原理(也叫数据绑定原理.双向数据绑定原理): ...
- vb.net 以读文本文件的方式对XML文件进行遍历
' 对XML文件按照文本文件的方式进行遍历 Private Sub checkFile_establishEntity(strFile As String) Dim reader AsTextR ...
- Computer-Hunters——项目系统设计与数据库设计
Computer-Hunters--项目系统设计与数据库设计 前言 本次作业属于2019秋福大软件工程实践Z班 本次作业要求 团队名称: Computer-Hunters 本次作业目标:撰写一份针对团 ...
- Git-push和pull分支
查看分支信息:git branch -r 查看所有分支信息:git branch -a 本地推送分支:git push origin branch-name 推送分支前最好先pull分支:git pu ...
- 不了解这12个语法糖，别说你会Java！
阅读本文大概需要 10 分钟. 作者:Hollis 本文从 Java 编译原理角度,深入字节码及 class 文件,抽丝剥茧,了解 Java 中的语法糖原理及用法,帮助大家在学会如何使用 Java 语 ...