HTML/CSS笔记

2018-12-07 本文已影响0人 SimonJoe246

课程：HTML5入门翁恺

HTML

如今的 HTML 标记更多是说明这是什么的(段落、标题...)，具体长什么样通常由 CSS 决定。（HTML5仍保留了少数表示样式的 HTML 标签）
  表示换行符，中间无空行，无结束标志(HTML中极少)。表示段落标记符，中间有空行
<del> 表示删除线，标记要删除的内容。<s> 也有删除线的效果，但在 HTML5 中已经删除
<ins> 有下划线效果，表示这是添加的内容，一般与 <del> 连用

CSS

使用 CSS 有三种方式，引用外部 CSS 文件，在 <head> 中插入，在 HTML 标签内插入

列表

list-style-type: disc(default) or square or circle
list-style-image: url(file: image or address: image)
list-style-position: inside(与标识符左侧对齐) or outside(与标识符右侧对齐) 行长度超过页面宽度发生换行scroll时才有效。
list-style: inside outside 可以合并上两项到一句。

表格

border: 1px solid blue;
border-collapse: collapse or seperate (相邻两条线是否合并)

块结构及定位

一个段落就是一个块结构，<div> 可以包含多个段落，段落中还可以包含 段
margin: top right bottom left 可以指定块周边相隔的间距。注：两个相邻块之间的间距非相加关系，选最大值，如上一个块的bottom和下一个块的top值中取最大值。

三种定位方式：普通流、浮动、绝对定位。

position: relative(相对定位)/static(default)

<p style="position: relative; left: -20px; bottom: -20">第一段</p>
<p style="margin: 10px 50px 50px 10px">
第二段
</p>

relative 是相对定位，（ps:个人理解，是相对于其默认的流式定位来说的距离，所以才会造成 bottom值为负时，文字向下移动，bottom为正时，文字向上移动）。第一段中的position的bottom属性将会忽略第二段的margin，是其不起作用，如图：

[图片上传失败...(image-abafe8-1544191805319)]

absolute是绝对定位，相对其上一层定位，如果其父层均无定位，则相对整个浏览器(即body)定位。

<body>
<div">
<p style="position: absolute; left: -20px; bottom: 0px">
第一段
</p>
<p style="margin: 10px 50px 50px 10px">
第二段
</p>
</div>
</body>

上面的代码，div 无定位(无position)，则根据浏览器定位，定位值为左侧相隔 -20px, 与底侧平齐。我们可以拖动浏览器底边框看其是否是相对于浏览器定位。

[图片上传失败...(image-8c9335-1544191805319)]

改变窗口大小，可以看到第一段内容随浏览器底边框移动而移动

[图片上传失败...(image-692bba-1544191805319)]

浮动定位：

<img src="little-monkey.jpg" style="float: right">
<div>
    <p style="position: absolute; left: -20px; bottom: -20px;">
        第一段
    </p>
    <p style="margin: 10px 50px 50px 10px">
        第二段
    </p>
</div>

观察，拖动浏览器右边框，图片跟随移动，不会被覆盖，即为浮动。

[图片上传失败...(image-8aca6c-1544191805319)]

[图片上传失败...(image-2ace24-1544191805319)]

CSS 选择器

标记选择器

即直接指定 HTML 标签样式。

p, th, td {border: 1px, solid, blue;}
p {background-color: green}

两个 p 之间是或的关系

类选择器

<!DOCTYPE html>
<html>
<head>
    <style type="text/css">
        *.important {font-weight: bold;}
    </style>
</head>
<body>
<p class="important">
    第一段
</p>
</body>
</html>

类名 important 之间可以是 *，这代表全局选择器，即全局的标签皆可使用此类，如果是 p.important，则代表只有段落才可以使用此类。

属性选择器

所有包含 title 的标签需要遵循的样式

<style type="text/css">
*[title] {  color:red}
</style>

后代选择器

之前 p, th, td {border: 1px, solid, blue} 使用是类选择器，需要遵循统一样式的标签以,隔开。

如果是空格隔开就是后代选择器了，后代选择器有两种方式：

p em {background-color: green}

表示  标签中的 em 遵循的样式， 标签与  标签中还可以有其他结构，能实现只对  起作用。

p > em {background-color: green}

如果是以 > 隔开，则两个标签必须紧挨着，中间不能有其他结构。如果有，样式对  不起作用

兄弟选择器

相邻的两个元素之间用 + 连接：

<style type="text/css">
h1 + p {background-color: yellow}
</style>
<body>
    <h1>那个夜晚</h1>
    <p>
        第一段
    </p>
    <p style="margin: 10px 50px 50px 10px">
        第二段
    </p>
</body>

这时，样式表只有对与 <h1> 相邻的 才起作用

伪类选择器

HTML 中超链接的颜色会随着其状态变化而变化。

    a: link {color: yellow ; text-decoration: none;}
    a: visited {color: red ; text-decoration: none;}
    a: hover {color: blue; text-decoration: underline;}
    a: active {color: black; text-decoration: underline;}

a 即为伪类

border/padding/margin

padding

padding controls the amount of space between the element and its border.

padding 填充属性，也称为内边界，表示元素内容与其边框之间的距离。属性值为长度值、百分数。

margin

Element's margin controls the amount of spaces between element's border and surrounding elements.

margin 称为边界属性，表示盒子边框与页面边界或其他盒子之间的距离。属性值为长度值、百分数或auto。

[图片上传失败...(image-23c3f4-1544191805319)]