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. numpy 之矩阵的认知

    di numpy 矩阵的创建与应用 可以用np.mat(a) 将a转变成矩阵 矩阵的加减法和 array相同 矩阵的乘法,如果矩阵要相乘的话就要A矩阵的行数,和B矩阵的列数相同才可以 这是查看数组不重 ...

  2. TZOJ 3711 浪漫自习(最大流)

    描述 如今的校园谈恋爱已是习以为常,这不,去上自习也要成双成对的.现在假设某班里有N对情侣从同一寝室楼出发,到达同一个教室上自习.途中,她们可能会经过长廊.静溪等一系列的景点观光游览.但情侣们不希望在 ...

  3. 【C++ const_cast强制转换】

  4. Gradle 实战（1）—— 配置环境变量

    背景:Gradle 是一款构建工具,继 Ant .Maven 之后的现代构建工具,我会在接下来的博文中陆续介绍,我在工作中是如何使用 Gradle 的. 下载 Gradle 下面是 Gradle 的官 ...

  5. 32位Server2008添加IIS

  6. linux命令学习之：tar

    tar命令可以为linux的文件和目录创建档案.利用tar,可以为某一特定文件创建档案(备份文件),也可以在档案中改变文件,或者向档案中加入新的文件.tar最初被用来在磁带上创建档案,现在,用户可以在 ...

  7. 【gRPC使用问题3】生成出来无法识别Google.Api.AnnotationsReflection.Descriptor

    1.问题截图: 2.解决方案: Install the package "Google.Api.Gax.Grpc". From the Package Manager Consol ...

  8. hdu 5461(2015沈阳网赛 简单暴力) Largest Point

    题目;http://acm.hdu.edu.cn/showproblem.php?pid=5461 题意就是在数组中找出a*t[i]*t[i]+b*t[j]的最大值,特别注意的是这里i和i不能相等,想 ...

  9. Get、Post 提交的乱码问题

    1.问题 在spring mvc开发的时候出现乱码问题: 2.解决方案 (1)Get提交:tomcat容器接收的造成的乱码问题,修改server.xml文件: (2)Post提交:在web.xml中配 ...

  10. js 中 的 if使用条件

    在javascript中,哪些值能作为if的条件呢 1.布尔变量true/false2.数字非0,非NaN/ (0 或NaN) 见下面的例子,莫以为负数就以为if语句为假了. 复制代码代码如下: va ...