JavaWeb基础_html&CSS
2018-08-06 17:02
288 查看
1.DIV相关技术
- Div是一个HTML标签,一个块级元素(单独显示一行)。它单独使用没有任何意义,必须和CSS结合起来使用,主要用于页面的布局。
- Span同样也是一个HTML标签,它是一个内联元素(显示一行)。它单独使用也没有任何的意义,必须和CSS结合使用,它主要用于对括起来的内容进行修饰作用。
2.什么是CSS?
- CSS指的是层叠样式表
- 样式定义如何去显示HTML元素
- 样式通常储存在样式表中
- 多个样式可以层叠为一
3.HTML和CSS的关系
- HTML:整个网站的骨架
- CSS:对整个网络骨架的内容进行的美化(修饰作用)
4.关于CSS的三种引入方式
[code]行内引入:在<body>标签内直接进行<div>标签的书写 <div style="color: red;font-size: 30px;"> 你若安好便是晴天 </div> 内部引入方式:在<head>标签里面加入如下代码 <style type="text/css"> div{ color: greenyellow; font-size: 30px; } </style> 在接下来的<body>标签里面直接添加如下代码即可: <div>你若安好便是晴天</div> 外部引入:先在一个外部文件夹,如CSS文件夹里面进行*.css的书写,如下代码: div{ color: greenyellow; font-size: 30px; } 之后在**.html文件中直接进行外部CSS文件的引入 <link rel="stylesheet" href="css/Out.css" /> 在接下来的<body>标签里面直接添加如下代码即可: <div>你若安好便是晴天</div>
5.CSS 的语法和规范
选择器{
属性名1:属性值1;
属性名2:属性值2;
属性名3:属性值3;//注意分号和冒号
}
6.CSS的三种基本选择器(元素选择器、类选择器、id选择器)
- 元素选择器:用来实现整体的设计,如下:在<body>标签内部写<div>标签设计即可
[code]<div>你若安好便是晴天11</div> <div >你若安好便是晴天22</div> <div>你若安好便是晴天33</div> <div>你若安好便是晴天44</div> <div>你若安好便是晴天55</div> <div>你若安好便是晴天66</div>
在<head>标签里面写选择器内容
[code]<style type="text/css"> div{ color: greenyellow; font-size: 30px; } </style>
- 类选择器:用来实现局部的设计,在<body>标签里面的<div>加上class属性
[code]<div>你若安好便是晴天11</div> <div class="div2">你若安好便是晴天22</div> <div>你若安好便是晴天33</div> <div class="div2">你若安好便是晴天44</div> <div>你若安好便是晴天55</div> <div>你若安好便是晴天66</div> 在<head>标签里面的类选择器中如下设置即可:注意div2前面的引入有个小数点 <style type="text/css"> .div2{ color: greenyellow; font-size: 30px; } </style>
-
id选择器:用来实现唯一的设计,在<body>标签里面的<div>加上id属性
[code]<div>你若安好便是晴天11</div> <div class="div2">你若安好便是晴天22</div> <div>你若安好便是晴天33</div> <div class="div2">你若安好便是晴天44</div> <div id="div5">你若安好便是晴天55</div> <div>你若安好便是晴天66</div> 在<head>标签里面的id选择器中如下设置即可:注意div5前面的引入有个#号 <style type="text/css"> #div5{ color: greenyellow; font-size: 30px; } </style>
7.其他选择器(层级选择器,属性选择器)
层级选择器:
[code]在body标签里面添加如下代码: <div> <p>你若安好便是晴天66</p> </div> 在style标签里面添加如下代码: <style type="text/css"> div p{ color: greenyellow; font-size: 30px; } </style>
属性选择器:
在body标签里面添加如下代码:
[code]用户名:<input type="text" name="username"/><br /> 密码:<input type="password" name="password"/> </div> 在style标签里面添加如下代码: <style> input[type='text']{ background-color: red; } input[type='password']{ background-color: blue; } </style>
阅读更多
相关文章推荐
- JavaWeb基础知识:Html与Css基础入门
- JavaWeb基础知识:Html,Css和Javascript项目实战
- JavaWeb入门(五)-HTML-CSS-Javascript基础
- HTML与CSS_基础 翁恺 笔记(2015 8.10更新)
- CSS基础教程17篇 [翻译Htmldog]
- html和css基础--float属性给父元素带来的问题及方案
- 一、HTML和CSS基础--HTML+CSS基础课程--第1部分
- 【慕课网】HTML&CSS基础课程学习笔记
- 一、HTML和CSS基础--HTML+CSS基础课程--第2部分
- 一、HTML和CSS基础--HTML+CSS基础课程--第4部分
- Html+css基础标签属性
- HTML与CSS基础之伪元素(五)
- HTML&CSS基础学习笔记1.19-DIV标签2
- 【嘉兴东臣php】HTML+CSS+JS基础学习笔记
- HTML&CSS基础篇之二:HTML应用定位
- 学习笔记-《零基础学习HTML5—html+css基础 》1.前端认知
- Web前端开发精品课HTML CSS JavaScript基础教程第六章课后编程题答案
- HTML/CSS一些需要注意的基础知识
- 在慕课学习HTML与CSS基础课程的一些笔记
- HTML&CSS基础学习笔记1.21-简单的注册页面