1 CSS：页面美化和布局控制

2 Css使用方式

2.1 内联样式使用

2.2 内部样式使用

2.3 外部样式使用

3 Css选择器

3.1 基础选择器

3.2 选择器扩展

4 常用属性

5 列：使用html和Css实现注册界面

1 CSS：页面美化和布局控制

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

好处：

功能强大
将内容展示和样式控制分离（降低耦合度。解耦）
提高工作效率（提高开发效率）
代码重用

2 Css使用方式

2.1 内联样式使用

<body><div style="color:red;">hello css</div>
</body><body><p style=”color:red”></p>
</body><body>
<p style="color:blue;font-size: 30px;">跨越</p>
</body>

2.2 内部样式使用

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

<head><meta charset="UTF-8"><title>Css内部样式</title><style>div{color: #31902e;}</style>
</head>
<body>
<!--内部样式* 在head标签内，定义style标签，style标签的标签体内容就是css代码-->
<div> Css学习</div>
<div> java学习</div>
</body>

2.3 外部样式使用

方法1： 1.定义css资源文件. 2.在head标签内，定义link标签，引入外部的资源文件

<head><meta charset="UTF-8"><title>Title</title><link rel="stylesheet" href="css/aa.css">
</head>
<body>
<div> Css学习</div>
<div> java学习</div>
<p>学习</p>
</body>

方法2： 1.定义css资源文件。 2. @import 方式实现

<head><meta charset="UTF-8"><title>Title</title><style>@import "css/aa.css";</style>
</head>
<body>
<div> Css学习</div>
<div> java学习</div>
<p>学习</p>
</body>

3 Css选择器

格式： 注意：每一对属性需要使用；隔开，最后一对属性可以不加；
       选择器 {
           属性名1:属性值1;
           属性名2:属性值2;
           ...
       }

3.1 基础选择器

id选择器：选择具体的id属性值的元素.建议在一个html页面中id值唯一 * 语法：#id属性值{}
元素选择器：选择具有相同标签名称的元素 * 语法：标签名称{}
类选择器：选择具有相同的class属性值的元素。 * 语法：.class属性值{}

注意：选择器优先级： id选择器>元素选择器类选择器>元素选择器

<head><meta charset="UTF-8"><title>基础选择器</title><style>/*id原则器*/#div1{color: #107cce;}/*元素选择器*/div{color: gray;}/*类选择器*/.div3{color: red;}</style>
</head>
<body>
<div id="div1">青青子衿悠悠我心</div>
<div class="div2">离离原上草</div>
<div class="div3">离离原上草</div>
</body>

3.2 选择器扩展

通配符选择器：* 语法： *{属性：属性值}
并集选择器：* 语法：选择器1,选择器2，选择器N{属性:属性值;｝
子选择器：筛选选择器1元素下的选择器2元素 * 语法：选择器1 选择器2{}
父选择器：筛选选择器2的父元素选择器1 * 语法：选择器1 > 选择器2{}
属性选择器：选择元素名称，属性名=属性值的元素 * 语法：元素名称[属性名="属性值"]{}
伪类选择器：选择一些元素具有的状态 * 语法：元素:状态{ }

<head><meta charset="UTF-8"><title>扩展选择器</title><style>/*1. 选择所有元素：语法： *{}*/*{color: #107cce;}/*2. 并集选择器：选择器1,选择器2{}*!*/div,p,a{color: gray;}/*3子选择器：筛选选择器1元素下的选择器2元素*/div p{color: green;}/* 4 父选择器：筛选选择器2的父元素选择器1*/div>p{border: 1px solid red;}/*5. 属性选择器：选择元素名称，属性名=属性值的元素*/input[type=text]{border: 3px solid;}input[type='password']{border: 5px solid;}/*6. 伪类选择器：选择一些元素具有的状态*//*默认状态下*/a:link{color: pink;}/*鼠标悬浮状态*/a:hover{color: green;}/*点击时*/a:active{color: yellow;}/*访问后的状态（失去焦点）*/a:visited{color: red;}</style>
</head>
<body><div><p>长恨歌</p></div><p>白居易</p><div>汉皇重色思倾国，御宇多年求不得。</div><div>杨家有女初长成，养在深闺人未识。</div><div>天生丽质难自弃，一朝选在君王侧。</div><input type="text" ><input type="password" ><a href="#">查看下一句</a>
</body>

4 Css常用属性

css字体、文本属性：

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

css背景属性：

background

css边框：

border：设置边框，符合属性

css尺寸

width：宽度 * height：高度

css盒子模型（控制布局）：

margin：外边距 padding：内边距(默认情况下内边距会影响整个盒子的大小)

box-sizing: border-box; 设置盒子的属性，让width和height就是最终盒子的大小

float：浮动值有（left, right）

    <style>h3{text-align: center;background: url("./img/login_bg.png") no-repeat;}p{color: gray;font-size: 15px;text-align: center;line-height: 20px;border: 1px solid red;}div{color: #020202;border: 1px solid gray;height: 25px;width: 300px;}</style>
</head>
<body><h3>长恨歌</h3><p>白居易</p><div>汉皇重色思倾国，御宇多年求不得。</div><div>杨家有女初长成，养在深闺人未识。</div><div>天生丽质难自弃，一朝选在君王侧。</div>
</body>

5 列：使用html和Css实现注册界面

    <style>*{margin: 0;padding: 0;box-sizing: border-box;}body{background: url("./img/register_bg.png") no-repeat  center;padding-top:100px ;}.rg_layout{width: 900px;height: 500px;border: white solid 8px;background-color: white;margin: auto;/*让div水平居中*/}.rg_left{float: left;margin: 15px;}.rg_left>p:first-child{/* 父标签的首个子对象*/color: #FFD026;font-size: 20px;}.rg_left>p:last-child{color:#A6A6A6;font-size: 20px;}#username,#password,#email,#name,#tel,#birthday,#checkcode{width: 251px;height: 32px;border: 2px solid #A6A6A6;border-radius: 10px;/*设置边框圆角*/padding-left:10px ;/*重点*/}#checkcode{width: 110px;}#img_check{height: 32px;border: 1px solid red;vertical-align: middle;}#btn_sub{width: 150px;height: 32px;background-color:#FFD026 ;border: 2px solid #FFD026;}.rg_center{float: left;}tr{height: 45px;}.td_left{width: 100px;text-align: right;}.td_right{padding-left: 50px;}.rg_right{float: right;}.rg_right>p:first-child{font-size: 15px;}.rg_right p a{color: pink;}</style>
。。。
<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 action="#" method="post" ><table border="0"  width="500"><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"></td></tr><tr><td class="td_left">性别：</td><td class="td_right"><input type="radio" name="sex"  value="male" checked>男<input type="radio" name="sex"  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"></td></tr><tr><td class="td_left"><label for="checkcode">验证码</label></td><td class="td_right"><input type="text" name="checkcode" id="checkcode"><img id="img_check" height="30" src="img/verify_code.jpg"></td></tr><tr><td colspan="2" align="center">
<!--                            <input  type="image" src="./img/regbtn.jpg" alt="注册">--><input type="submit" value="注册" id="btn_sub"></td></tr></table></form></div></div><div class="rg_right"><p>已有账号？<a href="#">立即登录</a></p></div>
</div></body>

29.1 CSS介绍、3种使用方式、9种选择器、常用属性、实现注册界面相关推荐

LVS原理详解（3种工作方式8种调度算法）--老男孩
一.LVS原理详解(4种工作方式8种调度算法) 集群简介集群就是一组独立的计算机,协同工作,对外提供服务.对客户端来说像是一台服务器提供服务. LVS在企业架构中的位置: 以上的架构只是众多企业里面 ...
【页面传值6种方式】- 【JSP 页面传值方法总结：4种】 - 【跨页面传值的几种简单方式3种】...
页面传值--最佳答案6种方式: 一. 使用QueryString变量 QueryString是一种非常简单也是使用比较多的一种传值方式,但是它将传递的值显示在浏览器的地址栏中,如果是传递一个或多个安全 ...
html之CSS设计（四种引入方式、各种选择器）
文章目录一.CSS简介二.四种引入方式三.CSS选择器四.练习代码本文主要介绍一下CSS的基本操作,四中引入方式和选择器.属性选择器的使用一.CSS简介 1.介绍: 也叫层叠样式表,用来控 ...
css三种引入方式与标签选择器
目录 css三种引入方式选择器标签选择器: class选择器: id选择器: 后代选择器: 子代选择器: 组合选择器: 通配符选择器: css三种引入方式 1.行间样式:权重最高1000,在标签的 ...
css样式三种引入方式选择器常用属性：背景属性字体属性边框属性内间距外间距盒子模型
一.CSS简介 1.什么是css 重叠样式表主要是负责标签的样式美化页面一个网页分三大部分结构层: 主要由html负责负责页面的结构表现层: 主要由css负责页面的展示样式美化页面行 ...
LVS三种工作方式八种算法
一.集群简介什么是集群计算机集群简称集群是一种计算机系统,它通过一组松散集成的计算机软件和/或硬件连接起来高度紧密地协作完成计算工作.在某种意义上,他们可以被看作是一台计算机.集群系统中的单个计算 ...
LVS原理详解（3种工作方式8种调度算法）
一.集群简介什么是集群计算机集群简称集群是一种计算机系统,它通过一组松散集成的计算机软件和/或硬件连接起来高度紧密地协作完成计算工作.在某种意义上,他们可以被看作是一台计算机.集群系统中的单个计算 ...
浅谈js函数三种定义方式四种调用方式调用顺序
在Javascript定义一个函数一般有如下三种方式: 函数关键字(function)语句: function fnMethodName(x){alert(x);} 函数字面量(Function Li ...
计算机三种校验方式,三种校验码
奇偶校验.海明码.CRC循环冗余校验码三种校验码比较重要,需要牢记,在计算机网络中用处较大奇偶校验根据被传输的一组二进制代码的数位中"1"的个数是奇数或偶数来进行校验.采用奇 ...

29.1 CSS介绍、3种使用方式、9种选择器、常用属性、实现注册界面

1 CSS：页面美化和布局控制

2 Css使用方式

2.1 内联样式使用

2.2 内部样式使用

2.3 外部样式使用

3 Css选择器

3.1 基础选择器

3.2 选择器扩展

4 Css常用属性

5 列：使用html和Css实现注册界面

29.1 CSS介绍、3种使用方式、9种选择器、常用属性、实现注册界面相关推荐

最新文章

热门文章