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. 二分 poj 3273

    题目链接:https://vjudge.net/problem/POJ-3273 把n个连续的数字划分成m个连续的部分,每个部分都有一个部分和(这个部分所有值加起来),现在要使划分里最大的那个部分和最 ...

  2. 15. 3Sum (重新分配数组大小）

    Given an array S of n integers, are there elements a, b, c in S such that a + b + c = 0? Find all un ...

  3. JAVA去重

    JAVA中去掉空格 1. String.trim() trim()是去掉首尾空格 2.str.replace(" ", ""); 去掉所有空格,包括首尾.中间 ...

  4. TZOJ 4621 Grammar(STL模拟)

    描述 Our strings only contain letters(maybe the string contains nothing). Now we define the production ...

  5. Python: 浅淡Python中的属性(property)

    起源:项目过程中需要研究youtube_dl这个开源组件,翻阅其中对类的使用,对比c#及Delphi中实现,感觉Python属性机制挺有意思.区别与高级编程语言之单一入口,在类之属性这一方面,它随意的 ...

  6. Djang的model创建的字段和参数复习

    class test_orm(models.Model): id = models.AutoField(primary_key=True) # int自增列,必须填入参数primary_key=Tru ...

  7. 编程:在屏幕中间分别显示绿色、绿底红色、白底蓝色的字符串'welcome to masm!'

    80*25彩色字符模式显示缓冲区的结构: 内存地址空间中,B8000H~BFFFFH共32KB的空间,为80*25彩色字符模式的显示缓冲区.向这个地址空间写入数据,写入的内容将立即出现在显示器上. 在 ...

  8. jquery分页插件精选

    1.最新的分页控件:Mricode.Pagination(推荐) https://github.com/mricle/Mricode.Pagination 2.Jquery Pagination Pl ...

  9. thinkphp两表联查并且分页

    ThinkPHP中关联查询(即多表联合查询)可以使用 table() 方法或和join方法,具体使用如下例所示: 1.原生查询示例: $Model = new Model(); $sql = 'sel ...

  10. RibbonControl 工具栏上的一些基本操作

    1:左上角图标的属性项 应用程序ico标 ribboncontrol默认 左上角图标区域隐藏,先转换成 ribbonFrom 然后区域出现 下一步修改此区域ico:右键ribbonControl1 属 ...