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. c++ - Linking problems due to symbols with abi::cxx11?

    看错误内容: /data/projects/LipReadingSDKGPU/lib/cwlibs/libLipReading.so: undefined reference to `tensorfl ...

  2. 微信小程序开发——setData的使用技巧

    前言: 之前使用 setData,一直都是作为给变量赋值,感觉比起vue给data中的变量的赋值还是有点麻烦的. 最近项目不太紧张,为了提高小程序的开发效率及提升小程序开发的能力,又重新的通读了下小程 ...

  3. gridview 显示数据库中的超链接

    gridview默认情况下,数据库中存储的超链接,是不会显示的.它会直接把超链接字符显示出来. 例如:选定数据源后,gridview自动生成的列是这样的: <asp:BoundField Dat ...

  4. YII2中操作数据库的方式

    一.以createCommand方式: // YII2中通过createCommand来处理数据库 // 查询多条记录 // {{%user}} 表示如果设置了表前缀,YII会自动帮你替换 $data ...

  5. Ado.net简单快捷帮助类

    using System; using System.Collections.Generic; using System.Data; using System.Data.SqlClient; usin ...

  6. 一个命令查看mysql的所有配置（原创）

    在mysql的命令提示符下,执行下面一句话,查看mysql服务器的所有全局配置信息: mysql> show global variables; 得到: 上表的文本内容: "Varia ...

  7. SQL新增数据取表主键最新值

    string strsql = "insert into SB_Survey(title) values ('标题');select @@IDENTITY"; int s = in ...

  8. C# mysql 插入数据，中文乱码

    用C#操作mysql时, 插入数据中文都是乱码,只显示问号,数据库本身使用的是utf-8字符. 网上百度一下有两种解决办法: 一种是在执行语句前面设置,如:MySQLCommand mCommand ...

  9. （转）system.badimageformatexception 未能加载文件或程序集

    “/xxxxx”应用程序中的服务器错误. ------------------------------------------------------------------------------- ...

  10. hdu 5532 (LIS) Almost Sorted Array

    http://acm.hdu.edu.cn/showproblem.php?pid=5532 题意大致是一组数中去掉一个数后问剩下的数是否构成非严格单调序列 正反各跑一遍最长非严格连续子序列,存在长度 ...