HTML元素和 CSS (9.23 第十天)

HTML元素分类：块级元素和内联元素
块级元素：标签元素会以新行开始或结束<h1><p><table>等
内联元素：显示数据不会以新行开始<a><img><td> 堆积在一起
<div>块级元素，用于组合其他元素，方便我们统一设置属性或者样式

布局：设计网页时，考虑到页面的美观。会设置页面的局部或者整体的一个布局
<table><div>

HTML的事件
需要触发某些动作的发生，需要事件的支持

CSS（层叠式样式表），决定页面怎么显示元素
引入方式：1、引入文件

行内样式：当前的标签元素中直接使用 style:""的属性

内嵌式：在<head>中写样式

外链式：<link >引入外部css文件；导入外部样式
<link rel="stylesheet" type="text/css" href="css/mystle.css">

引入外部样式：使用@import在<head></head>之间应用
<style type="text/css">@import url（css/mystyle.css/）</style>
后两种需要XX.css文件

优先级：行内模式>内嵌方式>外链式

CSS语法：
选择器{属性1：value1；属性2：value2；}（value是值）

选择器：
第一种情况：标签名影响其他同类型的标签

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <style type="text/css">
div {
　 　color:red;
    text-align:center;
    /*background-color: red;*/
}
    </style>
</head>
<body>
    <div>I'm hacker！！</div>
</body>
</html>

第二种情况：id选择器

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <style type="text/css">
#hacker{
    color: green;
    text-align: center;
}
#china{
    color: red;
}
    </style>
</head>
<body>
    <div id="hacker">I'm hacker！！</div>
    <div id="china">我是中国人！！</div>
</body>
/html>

第三种方式：class ，可以在不同的元素中去使用

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <style type="text/css">
.test/*p.test*/{   /*改为p.test，只在p标签中应用*/
    color: red;
    text-align: center;
}
    </style>
</head>
<body>
    <h1 class="test">这是一级标题</h1>
    <p class="test">这是段落</p>
</body>
</html>

常用样式：
后背景：background-color background-image
字体：color（颜色） size（大小） text-align（字体位置） text-indet（字体）
盒子模型：Margin 外边框） Border（边框）
Padding（内边框） Conten（显示数据的地方，文本/图片等）

CSS分组和嵌套：
分组：

<style>
<meta charset="utf-8"> 
<style type="text/css"> 
h1,h4,p{
color: green;
}
</style>

嵌套：
.marked{} class="marked"的标签
.marker p{} 为所有class=“marked”元素内的p元素正定一个样式
p.marked{} 只要是p标签，并class=“marked”才会被更改样式

CSS显示：
div{visibility: hidden;} 这种隐藏方式依然存在其原有的特征，只不过不显示而已
div{display: none;} 这种隐藏方式直接隐藏标签，其特征也没有了。

CSS定位：
position:static(不受top bottom left right 这种属性影响)/relative（相对定位元素的定位是相对其正常位置）/
fixed（位置固定）/absolute（绝对定位的元素的位置相对于最近的已定位父元素，如果元素没有已定位的父元素，
那么它的位置相对于<html>）/sticiky

CSS对齐：
text-align：center 文字居中
margin：auto 元素居中图片居中

HTML元素 和 CSS (9.23 第十天)

HTML元素和 CSS (9.23 第十天)