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 第十天)的更多相关文章

  1. 使用chrome查看页面元素的css样式

    使用chrome查看页面元素的css样式 我们在写页面的时候,可能总是不知道怎么回事,就发现某个元素出现了问题,但是不知道为什么会这样,这时候,就需要使用强大的chrome了!!! 举例说明: 1. ...

  2. 从文档流来看内联元素和块元素的css排版

    veda原创[抄录]讲得很好存自己这里看 从文档流来看内联元素和块元素的css排版 CSS文档流与块级元素(block).内联元素(inline),之前翻阅不少书籍,看过不少文章, 看到所多的是零碎的 ...

  3. javascript操作元素的css样式

    我们经常要使用Javascript来改变页面元素的样式.当中一种办法是改变页面元素的CSS类(Class),这在传统的Javascript里,我们一般是通过处理HTML Dom的classname特性 ...

  4. js原生获取元素的css属性

    习惯了用jQuery的css()的方法获取元素的css属性,突然不用jquery了,当要获得元素的css时候,我瞬间停顿了一下,咦?咋获取元素的css值?比如获取元素的width.是这样么?docum ...

  5. selenium之元素定位-css

    CSS定位方式和XPATH定位方式基本相同,只是CSS定位表达式有其自己的格式.CSS定位方式拥有比XPATH定位速度快,且比XPATH稳定的特性.下面详细介绍CSS定位方式的使用方法 被测网页的HT ...

  6. 3 、操作元素 (属性 CSS 和 文档处理)

    3   操作元素-属性 CSS 和 文档处理  3.1 属性操作 $("p").text()    $("p").html()   $(":check ...

  7. Day4 HTML新增元素与CSS布局

    Day4  HTML新增元素与CSS布局 HTML新增属性: 一:常见的布局标签(都是块级元素) <header>头部</header> <nav>导航</n ...

  8. 最容易理解的CSS的position教程——十步图解CSS的position

    CSS的positon,我想做为一个Web制作者来说都有碰到过,但至于对其是否真正的了解呢?那我就不也说了,至少我自己并不非常的了解其内核的运行.今天在Learn CSS Positioning in ...

  9. python 全栈开发，Day47(行级块级标签,高级选择器,属性选择器,伪类选择器,伪元素选择器,css的继承性和层叠性,层叠性权重相同处理,盒模型,padding,border,margin)

    一.HTML中的行级标签和块级标签 块级标签 常见的块级标签:div,p,h1-h6,ul,li,dl,dt,dd 1.独占一行,不和其他元素待在同一行2.能设置宽高3.如果不设置宽高,默认为body ...

随机推荐

  1. pytorch 调整tensor的维度位置

    target.permute([0, 3, 1, 2]) 一定要使用permute以及中括号 一些在我这里没起到作用的网上的例子: 1. https://blog.csdn.net/zouxiaolv ...

  2. Linux系统使用ss命令查看端口状态

    Linux系统使用ss命令查看端口状态 目录 1.可用工具 2.ss帮助 2.1 选项分类说明 2.2 过滤选项family 2.3 过滤选项state 2.4 状态之间的关系 3.ss的使用 3.1 ...

  3. threading 多线程

    # coding:utf- import time from threading import Thread def foo(x):#这里可以带参数def foo(x) print "foo ...

  4. php+ajax实现无刷新动态加载数据技术

    我们浏览有些网页的时候,当拉动浏览器的滚动条时到页底时,页面会继续自动加载更多内容供用户浏览.这种技术我暂且称它为滚屏加载技术.我们发现很多网站用到这种技术,必应图片搜索.新浪微博.QQ空间等将该技术 ...

  5. There is no Action mapped for action name hello.

  6. PHP实现微信网页登陆授权开发

    这篇文章主要介绍了关于PHP实现微信网页登陆授权开发,有着一定的参考价值,现在分享给大家,有需要的朋友可以参考一下 更多PHP相关知识请关注我的专栏PHP​zhuanlan.zhihu.com 微信开 ...

  7. Spring JMSTemplate 与 JMS 原生API比较

    博客分类: JMS Spring 2.x   JMSUtil与Spring JmsTemplate的对比 Author:信仰 Date:2012-4-20 未完待续,截止日期2012-4-20 从以下 ...

  8. 多元线性回归算法的python底层代码编写实现

    1.对于多元线性回归算法,它对于数据集具有较好的可解释性,我们可以对比不过特征参数的输出系数的大小来判断它对数据的影响权重,进而对其中隐含的参数进行扩展和收集,提高整体训练数据的准确性. 2.多元回归 ...

  9. CF755G PolandBall and Many Other Balls 题解

    从神 Karry 的题单过来的,然后自己瞎 yy 了一个方法,看题解区里没有,便来写一个题解 一个常数和复杂度都很大的题解 令 \(dp_{i,j}\) 为 在 \(i\) 个球中选 \(j\) 组的 ...

  10. Hive事务原理和Datax同步事务表问题解决

    一.事务的概述 1.定义 事务就是一组单元化操作,这些操作要么都执行,要么都不执行,是一个不可分割的工作单位. 2.特点 事务(transaction)具有的四个要素:原子性(Atomicity).一 ...