前言
最近在学习牛腩新闻发布系统的时候接触了CSS和HTML,在接触这些知识之后才对制作网页有了一定的认识,先将遇到的部分知识点总结一下。
一、CSS简介
CSS(Cascading Style Sheet,可译为“层叠样式表”或“级联样式表”)是一组格式设置规则,用于控制Web页面的外观。通过使用CSS样式设置页面的格式,可将页面的内容与表现形式分离。CSS最早是1996年由W3C审核通过并推荐使用的,CSS目前最新版本为CSS 3,是能够真正做到网页表现与内容分离的一种样式设计语言。相对于传统HTML的表现而言,CSS能够对网页中的对象的位置排版进行像素级的精确控制,支持几乎所有的字体字号样式,拥有对网页对象和模型样式编辑的能力,并能够进行初步交互设计,是目前基于文本展示最优秀的表现设计语言。
二、 HTML与CSS的互补
1.HTML发展到今天存在3个主要缺点:
第一,由于HTML代码不规范、臃肿,需要足够智能和庞大的浏览器才能够正确显示HTML;
第二,数据与表现混杂,当页面要改变显示时就必须重新制作HTML;第三,不利于搜索引擎搜索。
2.HTML也有两个显著的优点:
第一,使用Table的表现方式不需要考虑浏览器兼容问题;
第二,简单易学,易于推广。
3.CSS的产生恰好弥补了HTML的主要缺点,主要表现在以下几个方面。
CSS用于增强或控制网页样式,并允许将样式信息与网页内容分离。
引用样式表的目的是将“网页结构代码”和“网页样式风格代码”分离开,从而使网页设计者可以对网页布局进行更多的控制。
利用样式表,可以将整个站点上所有网页都指向某个CSS文件,设计者只需要修改CSS文件中的某一行,整个网页上对应的样式都会随之发生改变。
三、块级元素和行内元素
在CSS里还有特别重要的一个技术点,就是块级元素和行内元素,看看他们的区别在哪里。
区别:
行内元素与块级函数可以相互转换,通过修改display属性值来切换块级元素和行内元素,行内元素display:inline,块级元素display:block。
行内元素和其他行内元素都会在一条水平线上排列,都是在同一行的;块级元素却总是会在新的一行开始排列,各个块级元素独占一行,垂直向下排列,若想使其水平方向排序,可使用左右浮动(float:left/right)让其水平方向排列。
行内元素不可以设置宽高,宽度高度随文本内容的变化而变化,但是可以设置行高(line-height),同时在设置外边距margin上下无效,左右有效,内填充padding上下无效,左右有效;块级元素可以设置宽高,并且宽度高度以及外边距,内填充都可随意控制。
块级元素可以包含行内元素和块级元素,还可以容纳内联元素和其他元素;行内元素不能包含块级元素,只能容纳文本或者其他行内元素。
四、选择器
1.作用
用选择器规定语法的样式
修改网页直接从公共样式表修改就行,不破坏在html中写的代码。
同一个网页可以多次引用多个样式表文件。
2.类型:
(1)标签选择器
标签名{属性1:属性值1; 属性2:属性值2; 属性3:属性值3; } 或者 元素名{属性1:属性值1; 属性2:属性值2; 属性3:属性值3; }
标签选择器最大的优点是能快速为页面中同类型的标签统一样式,同时这也是他的缺点,不能设计差异化样式。
标签选择器 可以把某一类标签全部选择出来 div span
(2)类别选择器
类选择器以一个点号显示:
.center {text-align: center}
在上面的例子中,所有拥有 center 类的 HTML 元素均为居中。
在下面的 HTML 代码中,h1 和 p 元素都有 center 类。这意味着两者都将遵守 ".center" 选择器中的规则。
<h1 class="center">
This heading will be center-aligned
</h1>
<p class="center">
This paragraph will also be center-aligned.
</p>
.searchbtn { /* 搜索按钮的样式 */
background-image: url("../Image/search.png");
background-repeat: no-repeat;
width: 103px;
height: 33px;
border-style: none;
background-color: #fff;
}
.commonfrm {
/* 框架公共样式 */
border: 1px solid #DEDFDE;
float: left;
width: 560px;
}
(3)ID选择器
ID选择器以 "#" 来定义。
下面的两个 id 选择器,第一个可以定义元素的颜色为红色,第二个定义元素的颜色为绿色:
#red {color:red;}
#green {color:green;}
#top img {
/* 頂部图片样式 */
float: left;
border-width: 0;
}
#footer {
/* 尾部样式 */
text-align: center;
border-top: 1px solid #D6D7D6;
padding-top: 10px;
clear: left;
}
下面的 HTML 代码中,id 属性为 red 的 p 元素显示为红色,而 id 属性为 green 的 p 元素显示为绿色。
<p id="red">这个段落是红色。</p>
<p id="green">这个段落是绿色。</p>
选择器大全链接
https://www.runoob.com/cssref/css-selectors.html
嵌套选择:span
有唯一性,只能被引用一次
(4)全局声明*
* { /* 把默认值都设置为0 */
margin: 0;
padding: 0;
}
五、链接
a:link - 正常,未访问过的链接
a:visited - 用户已访问过的链接
a:hover - 当用户鼠标放在链接上时
a:active - 链接被点击的那一刻
a:link, a:visited {
/* 鼠标未移上去的超链接的样式, 超链接访问后的样式 */
color: #000;
text-decoration: none;
}
a:hover {
/* 鼠标移到超链接上的样式 */
color: #00f;
text-decoration: underline;
<a href="http://www.tg029.com" target="_blank"><img src="Image/tg029logo.gif" width="600px" /></a>
六、CSS 盒子模型(Box Model)
所有HTML元素可以看作盒子,在CSS中,"box model"这一术语是用来设计和布局时使用。
CSS盒模型本质上是一个盒子,封装周围的HTML元素,它包括:边距,边框,填充,和实际内容。
盒模型允许我们在其它元素和周围元素边框之间的空间放置元素。当我们进入网页的时候按F12就可以看见自己制作的网页的盒子模型,效果图如下。
不同部分的说明:
- Margin(外边距) - 清除边框外的区域,外边距是透明的。
- Border(边框) - 围绕在内边距和内容外的边框。
- Padding(内边距) - 清除内容周围的区域,内边距是透明的。
- Content(内容) - 盒子的内容,显示文本和图像。