我的ASP.NET学习笔记03CSS基础知识
2018-08-06 09:09:21来源:博客园 阅读 ()
CSS的基础概念
CSS的作用就是对网页中元素进行更精细的美化
在网页中加入CSS的三种方法
- 内嵌式:直接在HTML标签中添加style属性,在style属性值里面书写css,
比如:<p style=”今天天气一般</p>
- 内部样式:是将CSS的内容书写在本网页中
<style type=”text/css”></style>开始与结束标签之间的样式表。
- 外部样式表:就是将css样式的内容放在一个单独的(扩展名为css,就是文件后缀)的文件中。
然后:在html网页中使用:
<link href=”css文件” rel=”stylesheet” type=”text/css”/>
或
<style type=”text/css”>@import url(CSS文件.css);</style>
将外部样式表引入到当前网页中来。
CSS选择器
选择器就是将css样式对应匹配到html标签的一种机制,简单说就是:样式表中的哪个样式该用在哪个html标签上就匹配到哪个标签上。
样式类选择器
一个html标签的class属性中不只是能使用一个样式类,它可以使用多个样式,类名之间用空格分隔,若两个样式都设置了高度宽度,使用多个样式只有最后一个样式设置的高宽度生效。
示例:class=”aa bb”
- 在样式表中我需要给样式起一个样式名,
比如:
.aa{text-indent:-18.0000pt;mso-char-indent-count:0.0000;mso-list:l4 level1 lfo2;">
2. 在html元素的标签中,我们要定义一个class属性,其属性值对应样式表中的样式类名,这样我们就可以让该元素按照样式表中指定的样式来显示。
ID选择器
- 在样式表中我需要给样式起一个ID名,
比如:
#aa{text-indent:-18.0000pt;mso-char-indent-count:0.0000;mso-list:l2 level1 lfo3;">
2. 在html元素的标签中,我们要定义一个ID属性,其属性值对应样式表中的ID名,这样我们就可以让该元素按照样式表中指定的样式来显示。
标签选择器
标签选择其直接对应一种html标签,比如:段落P,A,TABLE,IMG
- 在样式表中直接书写html标签名,比如:
P{}
这样就能够将网页中所有的段落<p>标签的背景色,一次性改变。
组合选择器(层级选择器)
我们可以使用层级选择器来根据选择器之间的关系匹配到相应的html元素,选择器之间用空格分隔,左边的选择器比右边的选择器高一个层级。意思就是说,右边的选择器必须包含在左边的选择器之中才行。
比如:
.x1 .x2{color:red;}
分组选择器
通常运用与多个选择器代的表多个html元素同时设置相同的样式,多个选择器之间用逗号分隔。
比如:
.a1, .a3{color:blue;}
Css字体设置
设置字体颜色color
<color>的值可以是六位的16进制数,也可以是颜色的名字(英语),或者使用rgb(red,blue,green)红蓝绿三色值。
比如
.a1{color:rgb(255,0,0);}
字体的名称
可以设置网页中文字设置为计算机内安装了的字体样式。
比如:
font family:”华文行楷”;
字体大小
使用font-size属性进行设置,在网页中通常使用像素为单位。
字体粗细
使用font-weight属性可以设置文字是加粗还是正常显示。
normal正常显示
bold加粗
比如:
Font-weight:normal
字体倾斜
示例:
Font-style:italic
CSS中的文本格式设置
文本对齐text-align
文本在容器之内的水平对齐方向。
示例:
.dd22{text-align:center;}
文本线条text-decoration
给文本添加删除线line-through、上划线overline、下划线underline
示例:
.dd22{text-decoration:line-through;}
文本行高line-height
每一行的高度,也可以用于行与行之间产生距离。可用于除了表格外的垂直居中。表格有vline来垂直居中。
示例:
line-height:100px
字间距letter-spacing
字母或汉字之间的距离
示例:
letter-spacing:20px
单词间距word-spacing
示例:
word-spacing
Css中的背景
背景色background-color
示例:
background-color:green
背景图background-image
示例:
background-image:图片地址
背景重复方式background-repeat
当我们对一个html容器设置背景图之后,我们就可以对其设定,背景重复的方式。因为当背景图片小于容器大小时,背景图会自动平铺满整个容器。
也就是background-repeat的默认值:repeat。
属性值:
Repeat:铺满整个容器
Repeat-x:横向平铺
Repeat-y:纵向平铺
No-repeat:背景图只显示一次,不会重复。
背景位置background-position
是指当背景图没有占满或铺满一个html容器时,我们可以用这个属性来调整图片相对于容器出现的位置。
属性通常有两个值,第一个代表横向位置,第二个代表纵向位置。
示例:
Background-position:center cottom;
就是指让图片出现在容器的底部中间位置。
属性值:top、bottom、center、left,right。
背景附着background-attachment
通常用于令背景图固定在一个位置上,为不会随着内容位置的滚动而改变。
比如:
<body style:”background-image:url(cc.jpg);Background-attachment:fixed;”>
固定整个网页的背景。
CSS属性
Padding内边距
内容与容器边缘之间的距离
示例:
padding:10px(四边)
padding:10px 20px 30px 40px(上右下左)
padding:10px 20px(上下,左右)
Margin外边距
Auto:可以让div整体居中。*
容器边缘与其他容器之间的距离
示例:
Margin:10px(四边)
Margin:10px 20px 30px 40px(上右下左)
Margin:10px 20px(上下,左右)
Border边框线
容器的边框线的宽度、样式、颜色。
Border-width:边框宽度 如:border-width:10px
Border-color:边框颜色 如:border-color:black
Border-style:边框样式 如:border-style:solid
属性:
Solid:实线
Dotted:点化线
Border的缩写
Border:10px(宽度) solid(样式) black(颜色),属性值用空格分开。
Border-width的缩写
Border-width:10px 20px 30px 40px;
Border-width:5px 20px;
Float浮动属性
针对容器本身来设置其对其方式。
线性元素inline |
块级元素block |
<span> |
<div> |
多个线性元素可以处于同一行 |
多个并列的块级元素是不能处于同一行的 |
|
|
<span>标签
通常没有明显的显示效果,一般仅仅是作为一个概念上的容器来使用。
<div>标签
特性:
- 在默认情况下,两个div不能够同时处于同一行。
- 一边加载一边显示,因此可以增强用户体验。
- 两个div必须都设置了width、height属性。并且两个div的宽度的宽度之合不能超过父容器的宽度。
- 两个div必须都设置了float属性。
- 在不设置宽度高度的情况下,默认宽度是父容器的100%,默认高度是0,所以看不见。
如何让两个div处于同一行
盒子模型
几乎所有的html容器,都可以设置padding、border、margin属性,因此,一个html容器其真正占用的宽度与高度,是这四者相加的结果。
比如:
宽度=width+padding-left+padding-right+margin-left+margin-right+border-left-width+border-rigth-width
高度=height+padding-top+padding-bottom+margin-top+margin-bottom+border-top-width+border-right-bottom
Position属性
- Absolute(绝对)
- Relative(相对)
浮动层
要想让一个元素比如:div浮动在网页正文的上方,需要两个div相配合才能完成。
- 必须要有两个是父子嵌套关系的div。
- 这两个div中父div的css属性中包含position:relative;子div的css属性中包含position:absolute。
- 子div的css属性中通过top,left,right,bottom属性来控制浮动div的位置。0代表父div的边缘,也可以通过负值来让浮动层超出父div的范围。
?清除浮动:float对齐效果
示例:
Clear:both;
Clear属性用于清除当前元素与上一个元素的浮动对齐效果,令其另起一行。
Clear:left 清除左浮动
Clear:right 清除右浮动
Clear:both 清除左右浮动
Clear的附加作用:在很多时候,由于div的高度定义问题导致页面出现内容重叠现象,这通常是由于上方的div无法指定具体的高度。此时,我们就可以使用clear:both;来让div自动适应内容的高度。
Overflow内容超出容器的处理方式
Overflow:visible;默认值,在容器外可见。
Overflow;hidden;在容器外隐藏
Overflow;scroll; 出现滚动条
几乎所有浏览器都可以按F12显示网页代码
块级/线性元素转换
Display属性:
用于转换html元素的显示方式,通常在块级元素与线性元素转换时使用。 比如: <style type="text/css"> span{ display:block;}————将所有span抓换为块级元素。 div{ display:inline;}—————将所有div转换为线性元素。 </style>
隐藏一个元素
Div{display:none;}
UL+CSS
示例:
ul,li{display:black;}
通常在网页中很多人习惯于用ul来代替div,作为菜单或列表的容器。好处之一是,避免满篇清一色的div而造成混淆。
伪类
超链接的颜色,并不能直接通过在容器的css中加入color属性的方式来改变。
伪类是专门用来描述超链接在不同的状态下,以不同的方式去显示。
比如:
正常状态,鼠标移动到超链接上的状态,被访问过的超链接状态。
语法:
A:link{}————代表这个没有被访问应该是什么样子
A:hover{}———代表鼠标移动到超链接上是什么样子
A:visited{}———代表这个地方被访问过是什么样子
A:active{}———代表鼠标点下未抬起的超链接样子
鼠标形状
Css中的cursor属性代表鼠标移动到物体上方时的形状。
比如:
pointer 手指
网页与网站的区别
一个html文件就是一个网页,一个网站则是网页的集合。
练习题:
- 写一首古诗:《登黄鹤楼》
每一行都放在一个段落P标签中,将所有的P标签背景色设置为黄色,
第一行用ID选择器设置为红色,第二行用类选择器设置绿色
- 制作一个一行两列的表格,左侧是所有名字的名字,右侧是一个内嵌页,将班级所有同学资料做成一个网页,轮流切换显示在内嵌页中。
- 写古诗:《赠汪伦》或《静夜思》
第一行使用内嵌式,微软雅黑,红色,48px
第二行使用内部样式,黑体,蓝色,42px
第三行使用外部样式,华文行楷,紫色,36px
第四行与第二行一样,要求使用分组选择器实现。
标签:
版权申明:本站文章部分自网络,如有侵权,请联系:west999com@outlook.com
特别注意:本站所有转载文章言论不代表本站观点,本站所提供的摄影照片,插画,设计作品,如需使用,请与原作者联系,版权归原作者所有
下一篇:SASS简介及使用方法
- 转行Web前端工程师要掌握的学习知识汇总 2020-06-10
- 毕业生想学习web前端开发,有什么好的发展方向吗? 2020-06-09
- 转行前端很迷茫,该怎么学习? 2020-06-06
- 前端学习记录 2020-06-05
- 前端如何学习? 2020-06-04
IDC资讯: 主机资讯 注册资讯 托管资讯 vps资讯 网站建设
网站运营: 建站经验 策划盈利 搜索优化 网站推广 免费资源
网络编程: Asp.Net编程 Asp编程 Php编程 Xml编程 Access Mssql Mysql 其它
服务器技术: Web服务器 Ftp服务器 Mail服务器 Dns服务器 安全防护
软件技巧: 其它软件 Word Excel Powerpoint Ghost Vista QQ空间 QQ FlashGet 迅雷
网页制作: FrontPages Dreamweaver Javascript css photoshop fireworks Flash