html-day04

1、html属性的弊端
1、完成相同的功能需要不同的属性支持
2、可维护性不高
2、CSS
1、什么是CSS
Cascading Style Sheet
层叠样式表、级联样式表、样式表
2、使用CSS的好处
1、将内容与表现分离
2、提高了代码的可重用性和可维护性
3、CSS与HTML之间的关系
1、html主要用于构建网页结构与内容
2、CSS 用于构建网页的 样式
4、html属性 与 css使用
能使用css修改的样式就不要用html属性
html特有的属性只能使用html属性，比如 colspan,rowspan
3、使用CSS样式表
1、CSS样式表使用方式
1、内联方式
在html标签中使用css【样式】
2、内部样式表
将【样式表】定义在html<head>中
3、外部样式表
将【样式表】定义在外部css文件中(.css)
由html页面进行引入

2、样式表的使用
1、内联方式
行内样式
使用方法：将样式定义在标签的style属性中
CSS语法：
1、允许出现一个或多个 属性:值; 对 在style中
2、<div style="color:red;"></div>
2、内部样式表
1、在<head>中 添加 一对 <style></style>
2、在style 中，允许出现若干 【样式规则】
样式规则组成:
选择器：规范了页面中哪些元素能够使用定义好的样式
样式声明：各个样式属性以及值 属性:值;

选择器{
/*注释*/
样式声明;
属性:值;
属性:值;
}
/*

*/
3、外部样式表
step1:创建样式表文件，用于保存样式规则
xxx.css
step2:在页面对样式表文件进行引入
<head>
<link rel="stylesheet" type="text/css" href="样式表文件路径" />
</head>
4、CSS语法
1、CSS语法规范
1、样式语法总结
1、内联：样式声明
2、样式表(内外)
多个样式规则组成
样式规则：选择器和样式声明组成
2、CSS样式表特征
1、继承性
大多数样式规则可以被继承的
2、层叠性
为一个元素定义多个样式
样式属性不冲突时，多个样式可以层叠为一个
3、优先级
样式定义冲突时，按照不同样式规则的优先级来应用样式

浏览器缺省设置 最低
外部样式表或内部样式表 中
就近原则:就近优先
内联样式 最高
相同样式，以最后一次为主

!important规则 :
调整样式规则的优先级
p{
color:red !important;
}

2、选择器
选择器的作用：规范了页面中哪些元素能够使用定义好的样式
1、通用选择器
作用：匹配页面上的任何一个元素
语法：*{}
*{
font-size:12px;
/*...*/
}
2、元素选择器
别名：标签选择器、标记选择器
作用：匹配页面上指定的元素
语法：元素名称作为选择器
body{

}
div{

}
....

body{
font-size:12px;
/*字体*/
font-family:Verdana,"微软雅黑";
}
3、类选择器
作用：通过元素的class属性值，对类选择器进行引用
语法：.类名{}
使用: <div class="类名"></div>
注意：类名不能以数字开头

.div123{}
<div class="div123"></div>

h3{} -->元素选择器
.h3{} -->类选择器
4、分类选择器
将类选择器和元素选择器结合使用，实现对某种元素中不同样式的细分控制
语法:元素选择器.类选择器{}
div.redBack{}
5、id选择器
为标有特定id的html元素指定样式
语法：#id值{}
#header{
background-color:red;
}
<div id="header"></div>
6、群组选择器
语法：选择器声明是以 , 隔开的选择器列表
场合：将一些相同的规则用于多个元素时
div,p,#p1,div.top{
color:red;
}

#p1{
background-color:orange;
}
7、后代选择器
语法：选择器1 选择器2{}
div span{
/*匹配div中所有的span*/
}
#d1 #p1{

}
div.top span{

}
8、子代选择器
只通过父子级关系定位元素
语法：选择器1>选择器2
#d1>div{}
9、伪类选择器
特点：匹配元素某种特定的状态
语法: 由 :作为结合符
选择器:伪类选择器{}
CSS伪类可以分为：
1、链接伪类
:link 匹配尚未访问的超链接
:visited 匹配访问过的超链接
2、动态伪类
:hover 匹配鼠标悬停在html元素的状态
:active 匹配元素被激活时的状态
:focus 匹配元素获取焦点时的状态(多数使用在 文本框 上)

3、目标伪类
4、元素状态伪类
5、结构伪类
6、否定伪类
问题：如果多个选择器，同时改掉一个元素的样式，最终以谁为准？？

5、颜色单位
RGB ：
R ：red 红色
G ：green 绿色
B ：blue 蓝色
1、rgb(r,g,b)
每个值的范围 0-255
rgb(0,0,0) : 黑色
rgb(255,255,255) : 白色
rgb(255,0,0) : 红色
2、rgb(r%,g%,b%)
3、#rrggbb
十六进制：0-9 A-F

#000000 : 黑色
#ffffff : 白色
#abc12f
4、#rgb
#000 -> #000000
#aaa -> #aaaaaa
5、颜色的英文单词
6、尺寸
设置元素的宽度和高度
像素 和 百分比 作为单位
1、宽度
width

max-width : 最大宽度
min-width : 最小宽度
2、高度
height

max-height
min-height
3、溢出处理
属性：
overflow
overflow-x : 横向溢出处理方式
overflow-y : 纵向溢出处理方式
取值：
visible ：溢出可见
hidden ：溢出隐藏
scroll ：出现滚动条
auto ：自动不溢出不显示滚动条，溢出的话则显示滚动条
4、注意
能够修改尺寸属性的元素
1、块级元素
p,div,hn,ul,ol,dl,dt,dd
2、存在width、height属性的html元素
img，table

行内元素：无法修改尺寸
7、边框属性
1、边框
属性：
简写方式：border:width style color;
width : 宽度 ， 以px为单位
style : 样式
取值： solid 实线
dotted 虚线
dashed 虚线
color : 颜色#rrggbb,...
单边定义：
border-left/right/top/bottom:width style color;

border:1px solid black;
border-left:1px solid red;

border-方向:width style color;

border-width : 四个方向边框宽度;
border-方向-width:单边宽度

border-style : 四个方向边框样式
border-方向-style:单边样式

borer-color:四个方向边框颜色
border-方向-color:单边颜色

注意：颜色取值可以为 transparent(透明色)

2、边框倒角
属性 : border-radius
取值 : 具体数值 或 %

border-radius:20px; 四个角倒角半径都为20px
border-radius:10px 20px 30px 40px;
单独定义：
border-top-left-radius:
border-bottom-right-radius:

html-day04的更多相关文章

  1. Spring day04笔记（SVN讲解和回顾昨天知识）

    spring day03回顾 事务管理 基于xml配置 1.配置事务管理器 jdbc:DataSourceTransactionManager hibernate:HibernateTransacti ...

  2. day04 Java Web 开发入门

    day04 Java Web 开发入门 1. web 开发相关介绍 2. web 服务器 3. Tomcat服务器启动的问题 4. Tomcat目录结构 5. Web应用程序(虚拟目录映射,缺省web ...

  3. python day04笔记总结

    2019.4.1 S21 day04笔记总结 昨日内容补充 1.解释器/编译器 1.解释型语言.编译型语言 2.解释型:写完代码后提交给解释器,解释器将代码一行行执行.(边接收边解释/实时解释) 常用 ...

  4. Python基础(函数部分)-day04

    写在前面 上课第四天,打卡: 加勒比海盗今天上映:端午节公司发的粽子很有范! 一.函数的基本概念 - 函数是什么?  函数,就是一个'锤子',一个具有特定功能的'锤子',使用者可以在适当的时候使用这个 ...

  5. day04(权限修饰符，内部类，局部内部类，匿名内部类)

    权限修饰符, Public  >protected >default > private public 公共权限   随便都可以访问 protected  子类可以访问权限  (子类 ...

  6. Day04 dom详解及js事件

    day04 dom详解 DOM的基础 Document对象 Element对象 Node对象 innerHTML 事件处理 表单验证   上次课内容回顾: JS中ECMAScript用法: JS定义变 ...

  7. python开发学习-day04(迭代器、生成器、装饰器、二分查找、正则)

    s12-20160123-day04 *:first-child { margin-top: 0 !important; } body>*:last-child { margin-bottom: ...

  8. 2017-2018-1 JAVA实验站 冲刺 day04

    2017-2018-1 JAVA实验站 冲刺 day04 各个成员今日完成的任务 小组成员 今日工作 完成进度 张韵琪 写博客.进行工作总结 100% 齐力锋 找背景音乐 100% 张浩林 游戏操作说 ...

  9. python s13 day04

    1.1 all() 和 any( )   all() any()   0,None,"", [], (),{} #布尔值为0的 列举,None ,空列表,空元祖,空. print( ...

  10. Java编程基础阶段笔记 day04 Java基础语法（下）

    day04 Java基础语法 (下) 笔记Notes要点 switch-case语句注意 switch-case题目(switchTest5) 循环执行顺序 if-else 实现3个整数排序 Stri ...

随机推荐

  1. x86寄存器总结

    X86寄存器 ·x86寄存器分类: 8个通用寄存器:EAX.EBX.ECX.EDX.ESI.EDI.ESP.EBP 1个标志寄存器:EFLAGS 6个段寄存器:CS.DS.ES.FS.GS.SS 5个 ...

  2. 【转】 mysql 数据优化

    数据库优化离不开索引,如何理解索引? ---------------------------------------------------------------------------- 可以参考 ...

  3. Python+Selenium学习--上传文件

    场景 文件上传操作也比较常见功能之一,上传功能操作webdriver 并没有提供对应的方法,关键上传文件的思路.上传过程一般要打开一个系统的window 窗口,从窗口选择本地文件添加.所以,一般会卡在 ...

  4. 100-days:nine

    Title: Boeing(波音飞机) crash isolates FAA as(伴随,随着) China leads push against Max(出事机型,即737 Max) crash n ...

  5. Anaconda常用命令大全

    使用conda 首先我们将要确认你已经安装好了conda 配置环境 下一步我们将通过创建几个环境来展示conda的环境管理功能.使你更加轻松的了解关于环境的一切.我们将学习如何确认你在哪个环境中,以及 ...

  6. RTP格式解析

    一般为12字节,16字节头(转自https://www.cnblogs.com/qingquan/archive/2011/07/28/2120440.html) 概述: 实时传送协议(Real-ti ...

  7. bbs项目富文本编辑器实现上传文件到media目录

    media目录是在project的settings中设置的,static目录是django自己使用的静态文件的上传目录,media目录是用户自定义上传文件的目录 # Django用户上传的文件都放在m ...

  8. echarts柱状图Demo

    echarts链接:http://gallery.echartsjs.com/editor.html?c=xB1Sfo5JbX 代码: var xData = ['a', 'b', 'c', 'd', ...

  9. docker-ce-17.09 数据卷和数据卷容器

    docker容器中管理数据两种方式:1.数据卷(Data Volumes)2.数据卷容器(Data Volume Dontainers) 一.数据卷特性:1.数据卷可以在容器之间共享和重用2.对数据卷 ...

  10. golang基础学习

    一.输出hello,world程序 package main; import "fmt"; func main() { fmt.Printf("hello,world&q ...