网络编程1 基础笔记 html5 + CSS

最新推荐文章于 2020-08-21 21:09:15 发布

小思姓尹

最新推荐文章于 2020-08-21 21:09:15 发布

阅读量264

点赞数 1

分类专栏：学习笔记文章标签： html CSS

本文链接：https://blog.csdn.net/u014624632/article/details/83988189

版权

学习笔记专栏收录该内容

2 篇文章 0 订阅

订阅专栏

带目录笔记链接

CSS

内联样式 & 层叠样式（CSS）

内联样式是为元素添加样式的最简单有效的方式，

但是使用层叠样式表CSS（Cascading Style Sheets）更易于维护。

-- 内联样式 / 行内样式

示例：（用style属性）

<h2 style="color: red">我家的猫咪</h2>

--【层叠样式 CSS】

<style>

#元素选择器/类选择器/ID选择器 {属性名称: 属性值;}

</style>

注意：一定要在属性值的后面加上分号;。

注意：在CSS中，也就是在你的 style 元素内部，

类选择器必须添加 . 为前缀，（在HTML中，在class属性不能添加.为前缀）

定义ID选择器必须添加 # 为前缀。

<style>

h2 {color: red;} #为所有的h2元素创建一个元素选择器。将所有的h2元素设置为红色,

.red-text {color: red; } #类选择器

#cat-photo-element {background-color: green;} #id选择器

</style>

<h2 class="red-text">我家的猫咪</h2>

每一个HTML元素可以有（0个、1个或多个）class元素，

只需要在多个class之间用空格分开即可。

有些 class 属性都是用于 CSS 的。

有些 class 属性只是为了更方便地在jQuery中选中这些元素。

当我们开始使用jQuery，我们将修改HTML元素，但是实际上我们并不是直接在 HTML 文本中修改。【jQuery是最流行的JavaScript库】

每一个 HTML 元素还可以使用 id 属性（一般1个）。

使用 id 属性有若干好处，一旦当你开始使用 jQuery 的时候你会有更深的体会。

id 属性应该是唯一的，虽然浏览器并不强制唯一，但基于最佳实践，这一点是被广泛认可的，

所以请不要给一个以上的元素设置相同的 id 属性。

每一个指定元素的 id 都是唯一的，并且在每个页面中只能使用一次。

【id在整个页面应该唯一（否则<a标签实现内部跳转的时候会出错）】

样式属性

颜色 color

字号 font-size

字体 font-family

元素宽度 width

有几种默认的字体是所有浏览器都可用的，包括Monospace、Serif和Sans-Serif。

当某种字体不可用时，你可以让浏览器自动降级到另一种字体。

比如CSS样式： p {font-family: Helvetica, Sans-Serif;}

边框属性

CSS 边框的属性有style(样式)、color(颜色)、width(宽度)、height(高度)等。

例如想要让一个HTML元素的边框颜色为红色、边框宽度为5像素(px)、边框样式为固体(solid)：

<style>

.thin-red-border {

border-color: red;

border-width: 5px;

border-style: solid;

border-radius: 10px; //(边框半径) 除了像素还可以用一个百分比

}

</style>

【CSS 继承】

样式继承

<body>根元素，

<div>层元素，装其他元素的容器

样式冲突时，

子元素覆盖父元素

在 <style> 部分中 class 声明更靠后的更有优先权。

id属性优先于class属性

行内样式优先于CSS

CSS声明时使用!important,强制覆盖后面(同级别？)的CSS样式或CSS库样式。

每一个 HTML 页面都有一个 body 元素。
对 body 元素应用样式，所有其他元素将继承 body 元素的样式。
子元素的 class 与父元素的CSS样式冲突时，子元素的class会覆盖body元素的CSS。
子元素中多个class冲突时，在 <style> 部分中 class 声明更靠后的更有优先权。注意：与 HTML 中这些 class 的排序无关。即：浏览器读取 CSS 的顺序是从上到下，在发生冲突时，浏览器会使用最后的 CSS 声明。
id 属性与class 属性发生冲突，id 属性总是具有更高的优先级。与 style 元素 CSS 的声明位置无关，id 声明都会覆盖 class 声明。
行内样式与CSS冲突时，行内样式（如<h1 style="color: green">）将覆盖style中定义的所有 CSS。
最强大的覆盖CSS的方法：：为什么你要覆盖 CSS？？很多情况下，你会使用 CSS 库，这些库可能会意外覆盖掉你自己的 CSS。所以当你需要确保某元素具有指定的 CSS 时，你可以在CSS声明时使用!important。比如：.pink-text { color: pink !important; }。

html基础

一些html元素及属性

background-color 属性来设置一个元素的背景颜色。

每一个 HTML 页面都有一个 body 元素。是根元素。

div元素

div元素，也被称作division(层)元素，是一个盛装其他元素的通用容器。

可以利用CSS的继承关系把div上的CSS传递给它所有的子元素。

注释

<!--

-->

图片，只有一个单标签

使用img元素来为你的网站添加图片，使用src属性指向一个图片的具体地址。

alt属性，也被称为alt text，是当图片无法加载时显示的替代文本。搜索引擎也会搜索alt属性。

锚点标签

既可以用来链接到外部地址实现页面跳转功能， href=网址

也可以链接到当前页面的某部分实现内部导航功能。href=#id属性值

<a href="http://freecatphotoapp.com">cat photos</a>

设置锚点的href属性值为井号#加上想跳转区域对应的id属性值，这样就可以创建一个内部跳转。id是用来描述网页元素的一个属性，它的值在整个页面中唯一。

<a href="#footer" >Jump to Bottom</a>

...

<footer id="footer">Copyright Cat Photo App</footer>

target是锚点的一个属性，它指定了会以什么方式来打开链接，属性值 "_blank" 的意思是链接会在新元素页打开。

<a href="http://www.freecatphotoapp.com" target="_blank">cat photos</a>

有时你想为网站添加一个锚点，但如果你还不确定要将它链接到哪儿，这时可以用 # 号来创建固定链接（Dead Links），之后通过JavaScript更改链接指向的地址。

<a href="#" >cat photos</a>

无序、有序列表

无序列表 (带项目符号) 以 <ul>元素开始，并包含一个或多个<li>元素。

有序列表 (带数字编号) 以<ol>元素开始，并包含一个或多个<li>元素。

无序列表

<ul>

<li>cheese</li>

</ul>

有序列表

<ol>

<li>Garfield</li>

<li>Sylvester</li>

</ol>

form表单

输入框

嵌入在表单里面，并添加提交按钮

<button type="submit">Submit</button>

</form>

required 设置为必填字段

placeholder 占位符文本

单选框、复选框

radio buttons（单选按钮），checkboxes（复选框），只是input输入框的一种类型。

每一个复选/单选按钮都应该嵌套在它自己的label（标签）元素中。

所有关联的单选按钮应该拥有相同的name属性。

最佳实践是在label元素上设置for属性，让其值与单选按钮的id属性值相等，这样就在label元素和它的子元素单选按钮之间创建了一种链接关系。

<label><input type="radio" name="indoor-outdoor" checked> Indoor</label>

<label><input type="radio" name="indoor-outdoor"> Outdoor</label><br>

<label><input type="checkbox" name="personality" checked> Loving</label>

<label><input type="checkbox" name="personality"> Energetic</label><br>

<button type="submit">Submit</button>

</form>

checked 为默认选项

所有的 HTML元素本质上是小的矩形块，（三个和元素布局有关的属性）

代表着某一小块区域。

有三个影响HTML元素布局的重要属性：padding(内边距)、margin(外边距)、border(边框)。

元素的 padding 控制元素内容 content和元素边框 border 之间的距离。

元素的 margin 控制元素的 border 和元素实际所占空间的距离。如果你将一个元素的 margin 设置为负值，元素将会变大。

CSS 允许你使用 padding-top、padding-right、padding-bottom 和 padding-left来控制元素上右下左四个方向的 padding。还可以用padding: 10px 20px 10px 20px;分别指定顶部、右侧、底部、左侧的padding，简称：上右下左(顺时针方向)。

CSS 允许你使用 margin-top、margin-right、margin-bottom 和 margin-left 来控制元素上右下左四个方向的 margin。还可以用margin: 10px 20px 10px 20px;分别指定顶部、右侧、底部、左侧的margin，简称：上右下左(顺时针方向)。