CSS

文章目录

CSS
- 1、概念
- 2、CSS 的使用：CSS 与 html 结合方式
- - 2.1、内联样式
  - 2.2、内部样式
  - 2.3、外部样式
- 3、CSS 语法
- 4、选择器：筛选具有相似特征的元素
- - 4.1、基础选择器
  - - 4.1.1、id选择器
    - 4.1.2、元素选择器
    - 4.1.3、类选择器
  - 4.2、扩展选择器
  - - 4.2.1、选择所有元素
    - 4.2.2、并集选择器
    - 4.2.3、子选择器
    - 4.2.4、父选择器
    - 4.2.5、属性选择器
    - 4.2.6、伪类选择器
- 5、属性
- - 5.1、字体、文本
  - 5.2、背景
  - 5.3、边框
  - 5.4、尺寸
  - 5.5、盒子模型：控制布局

1、概念

Cascading Style Sheets 层叠样式表

层叠：多个样式可以作用在同一个 html 的元素上，同时生效

好处：

功能强大
将内容展示和样式控制分离
- 降低耦合度。解耦
- 让分工协作更容易
- 提高开发效率

2、CSS 的使用：CSS 与 html 结合方式

2.1、内联样式

在标签内使用 style 属性指定 css 代码

如：<div style="color:red;">hello css</div>

2.2、内部样式

在 head 标签内，定义 style 标签，style 标签的标签体内容就是 css 代码。

如：

<style>div{color:blue;}
</style><div>hello css</div>

2.3、外部样式

定义 css 资源文件

在 head 标签内，定义 link 标签，引入外部的资源文件

如：a.css 文件

div{color:green;
}
<link rel="stylesheet" href="css/a.css"><div>hello css</div>
<div>hello css</div>

注意：

1,2,3 种方式 css 作用范围越来越大
1 方式不常用，后期常用 2,3
3 种格式可以写为：
```
<style>@import "css/a.css";
</style>
```

3、CSS 语法

格式：

选择器 {属性名1:属性值1;属性名2:属性值2;...
}

选择器：筛选具有相似特征的元素
注意：
- 每一对属性需要使用；隔开，最后一对属性可以不加；

4、选择器：筛选具有相似特征的元素

4.1、基础选择器

4.1.1、id选择器

选择具体的 id 属性值的元素.建议在一个 html 页面中 id 值唯一。

语法：#id属性值{}

4.1.2、元素选择器

选择具有相同标签名称的元素。

语法： 标签名称{}

注意：id 选择器优先级高于元素选择器

4.1.3、类选择器

选择具有相同的 class 属性值的元素。

语法：.class属性值{}

注意：类选择器选择器优先级高于元素选择器

4.2、扩展选择器

4.2.1、选择所有元素

语法： *{}

4.2.2、并集选择器

语法：选择器1,选择器2{}

4.2.3、子选择器

筛选选择器 1 元素下的选择器 2 元素

语法： 选择器1 选择器2{}

4.2.4、父选择器

筛选选择器 2 的父元素选择器 1

语法： 选择器1 > 选择器2{}

4.2.5、属性选择器

选择元素名称，属性名=属性值的元素

语法： 元素名称[属性名="属性值"]{}

4.2.6、伪类选择器

选择一些元素具有的状态

语法：元素:状态{}

如：<a>

状态：
- link：初始化的状态
- visited：被访问过的状态
- active：正在访问状态
- hover：鼠标悬浮状态

5、属性

5.1、字体、文本

font-size：字体大小
color：文本颜色
text-align：对其方式
line-height：行高

5.2、背景

background：

5.3、边框

border：设置边框，符合属性

5.4、尺寸

width：宽度
height：高度

5.5、盒子模型：控制布局

margin：外边距
padding：内边距
- 默认情况下内边距会影响整个盒子的大小
- box-sizing: border-box; 设置盒子的属性，让 width 和height 就是最终盒子的大小
float：浮动
- left
- right

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>注册页面</title>
<style>*{margin: 0px;padding: 0px;box-sizing: border-box;}body{background: url("img/register_bg.png") no-repeat center;padding-top: 25px;}.rg_layout{width: 900px;height: 500px;border: 8px solid #EEEEEE;background-color: white;/*让div水平居中*/margin: auto;}.rg_left{/*border: 1px solid red;*/float: left;margin: 15px;}.rg_left > p:first-child{color:#FFD026;font-size: 20px;}.rg_left > p:last-child{color:#A6A6A6;font-size: 20px;}.rg_center{float: left;/* border: 1px solid red;*/}.rg_right{/*border: 1px solid red;*/float: right;margin: 15px;}.rg_right > p:first-child{font-size: 15px;}.rg_right p a {color:pink;}.td_left{width: 100px;text-align: right;height: 45px;}.td_right{padding-left: 50px ;}#username,#password,#email,#name,#tel,#birthday,#checkcode{width: 251px;height: 32px;border: 1px solid #A6A6A6 ;/*设置边框圆角*/border-radius: 5px;padding-left: 10px;}#checkcode{width: 110px;}#img_check{height: 32px;vertical-align: middle;}#btn_sub{width: 150px;height: 40px;background-color: #FFD026;border: 1px solid #FFD026 ;}</style></head>
<body><div class="rg_layout"><div class="rg_left"><p>新用户注册</p><p>USER REGISTER</p></div><div class="rg_center"><div class="rg_form"><!--定义表单 form--><form action="#" method="post"><table><tr><td class="td_left"><label for="username">用户名</label></td><td class="td_right"><input type="text" name="username" id="username" placeholder="请输入用户名"></td></tr><tr><td class="td_left"><label for="password">密码</label></td><td class="td_right"><input type="password" name="password" id="password" placeholder="请输入密码"></td></tr><tr><td class="td_left"><label for="email">Email</label></td><td class="td_right"><input type="email" name="email" id="email" placeholder="请输入邮箱"></td></tr><tr><td class="td_left"><label for="name">姓名</label></td><td class="td_right"><input type="text" name="name" id="name" placeholder="请输入姓名"></td></tr><tr><td class="td_left"><label for="tel">手机号</label></td><td class="td_right"><input type="text" name="tel" id="tel" placeholder="请输入手机号"></td></tr><tr><td class="td_left"><label>性别</label></td><td class="td_right"><input type="radio" name="gender" value="male"> 男<input type="radio" name="gender" value="female"> 女</td></tr><tr><td class="td_left"><label for="birthday">出生日期</label></td><td class="td_right"><input type="date" name="birthday" id="birthday" placeholder="请输入出生日期"></td></tr><tr><td class="td_left"><label for="checkcode" >验证码</label></td><td class="td_right"><input type="text" name="checkcode" id="checkcode" placeholder="请输入验证码"><img id="img_check" src="img/verify_code.jpg"></td></tr><tr><td colspan="2" align="center"><input type="submit" id="btn_sub" value="注册"></td></tr></table></form></div></div><div class="rg_right"><p>已有账号?<a href="#">立即登录</a></p></div></div></body>
</html>

JavaWeb学习笔记之——CSS相关推荐

javaWeb学习笔记1—前端三件套 HTML CSS JavaScript
学习视频地址 javaWeb学习笔记-前端三件套 HTML CSS JavaScript 1.字体标签 2. 字符实体 3.标题标签 4.超链接 5.列表标签 6. img标签路径 7.表格 8.i ...
B站狂神说JavaWeb学习笔记
JavaWeb学习笔记(根据b站狂神说java编写) 1.基本概念 1.1 前言静态Web: 提供给所有人看数据不会发生变化! HTML,CSS 动态Web: 有数据交互,登录账号密码,网站访问人数 ...
JavaWeb学习笔记（5）-B站尚硅谷
文章目录十四.书城项目第三阶段--优化 (1)页面jsp动态化 (2)抽取页面中相同的内容 A.登录成功的菜单 B.base.css.jQuery标签 C.每个页面的页脚 D.manager模块的菜 ...
javaweb学习笔记2(jquery的使用，以及常用的方法，选择器，过滤器)
javaweb学习笔记2 javascript正则表达式 regfxp对象方式1: var putt=new RegExp("e");//表示要求字符串中必须包含字符串evar ...
JavaWeb学习笔记（软件系统体系结构、Tomcat、Web应用、HTTP协议）
JavaWeb学习笔记 JavaWeb学习笔记软件系统体系结构常见软件系统体系结构C/S.B/S Web资源 Web服务器 Tomcat Tomcat概述安装.启动.配置Tomcat Web应用 ...
JavaWeb学习笔记（十）--HttpServletRequest
1. HttpServletRequest简介 HttpServletRequest对象代表客户端的请求,当客户端通过HTTP协议访问服务器时,HTTP请求头中的所有信息都封装在这个对象中 2. Ht ...
rem和em学习笔记及CSS预处理
rem和em学习笔记及CSS预处理 1.当元素A的字体单位是n rem时,它将根据根元素(html)的font-size的大小作为基准,比如 View Code parent-div中的em-div ...
JavaWeb学习笔记-目录（待完成）
JavaWeb学习笔记-目录(待完成) 01-基础加强(注解+反射) 02-mysql基础 03-mysql约束 04-mysql多表事务 05-jdbc 06-jdbc连接池JDBCTemplate ...
JavaWeb学习笔记2 —— Web服务器简介
JavaWeb学习笔记2 -- Web服务器简介参考教程B站狂神https://www.bilibili.com/video/BV12J411M7Sj 相关技术 ASP: 微软:国内最早流行的就是A ...

JavaWeb学习笔记之——CSS

CSS