我的ASP.NET学习笔记03CSS基础知识

2018-08-06 09:09:21来源:博客园 阅读 ()

新老客户大回馈,云服务器低至5折

CSS的基础概念

CSS的作用就是对网页中元素进行更精细的美化

在网页中加入CSS的三种方法

  1. 内嵌式:直接在HTML标签中添加style属性,在style属性值里面书写css

比如:<p style=”今天天气一般</p>

  1. 内部样式:是将CSS的内容书写在本网页中

<style type=”text/css”></style>开始与结束标签之间的样式表。

  1. 外部样式表:就是将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

  1. 在样式表中我需要给样式起一个样式名,

比如:

.aa{text-indent:-18.0000pt;mso-char-indent-count:0.0000;mso-list:l4 level1 lfo2;">

2. html元素的标签中,我们要定义一个class属性,其属性值对应样式表中的样式类名,这样我们就可以让该元素按照样式表中指定的样式来显示。

ID选择器

  1. 在样式表中我需要给样式起一个ID名,

比如:

#aa{text-indent:-18.0000pt;mso-char-indent-count:0.0000;mso-list:l2 level1 lfo3;">

2. html元素的标签中,我们要定义一个ID属性,其属性值对应样式表中的ID名,这样我们就可以让该元素按照样式表中指定的样式来显示。

标签选择器

标签选择其直接对应一种html标签,比如:段落PA,TABLE,IMG

  1. 在样式表中直接书写html标签名,比如:

P{}

这样就能够将网页中所有的段落<p>标签的背景色,一次性改变。

组合选择器(层级选择器)

我们可以使用层级选择器来根据选择器之间的关系匹配到相应的html元素,选择器之间用空格分隔,左边的选择器比右边的选择器高一个层级。意思就是说,右边的选择器必须包含在左边的选择器之中才行。

比如:

.x1 .x2{color:red;}

分组选择器

通常运用与多个选择器代的表多个html元素同时设置相同的样式,多个选择器之间用逗号分隔。

比如:

.a1, .a3{color:blue;}

Css字体设置

设置字体颜色color

<color>的值可以是六位的16进制数,也可以是颜色的名字(英语),或者使用rgbredbluegreen)红蓝绿三色值。

比如

.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;

就是指让图片出现在容器的底部中间位置。

属性值:topbottomcenterleftright

背景附着background-attachment

通常用于令背景图固定在一个位置上,为不会随着内容位置的滚动而改变。

比如:

<body style:”background-image:url(cc.jpg);Background-attachment:fixed;”>

固定整个网页的背景。

CSS属性

Padding内边距

内容与容器边缘之间的距离

示例:

padding10px(四边)

padding10px 20px 30px 40px(上右下左)

padding10px 20px(上下,左右)

Margin外边距

Auto:可以让div整体居中。*

容器边缘与其他容器之间的距离

示例:

Margin10px(四边)

Margin10px 20px 30px 40px(上右下左)

Margin10px 20px(上下,左右)

Border边框线

容器的边框线的宽度、样式、颜色。

Border-width:边框宽度 如:border-width10px

Border-color:边框颜色 如:border-colorblack

Border-style:边框样式 如:border-stylesolid

属性:

Solid:实线

Dotted:点化线

Border的缩写

Border10px(宽度) solid(样式) black(颜色),属性值用空格分开。

Border-width的缩写

Border-width:10px 20px 30px 40px;

Border-width:5px 20px;

 

Float浮动属性

针对容器本身来设置其对其方式。

 

 

线性元素inline

块级元素block

<span>

<div>

多个线性元素可以处于同一行

多个并列的块级元素是不能处于同一行的

 

 

<span>标签

通常没有明显的显示效果,一般仅仅是作为一个概念上的容器来使用。

<div>标签

特性:

  1. 在默认情况下,两个div不能够同时处于同一行。
  2. 一边加载一边显示,因此可以增强用户体验。
  3. 两个div必须都设置了widthheight属性。并且两个div的宽度的宽度之合不能超过父容器的宽度。
  4. 两个div必须都设置了float属性。
  5. 在不设置宽度高度的情况下,默认宽度是父容器的100%,默认高度是0,所以看不见。

如何让两个div处于同一行

盒子模型

几乎所有的html容器,都可以设置paddingbordermargin属性,因此,一个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属性

  1. Absolute(绝对)
  2. Relative(相对)

浮动层

要想让一个元素比如:div浮动在网页正文的上方,需要两个div相配合才能完成。

  1. 必须要有两个是父子嵌套关系的div
  2. 这两个div中父divcss属性中包含positionrelative;子divcss属性中包含positionabsolute
  3. divcss属性中通过topleftrightbottom属性来控制浮动div的位置。0代表父div的边缘,也可以通过负值来让浮动层超出父div的范围。

?清除浮动:float对齐效果

示例:

Clear:both;

Clear属性用于清除当前元素与上一个元素的浮动对齐效果,令其另起一行。

Clearleft 清除左浮动

Clearright 清除右浮动

Clearboth 清除左右浮动

Clear的附加作用:在很多时候,由于div的高度定义问题导致页面出现内容重叠现象,这通常是由于上方的div无法指定具体的高度。此时,我们就可以使用clearboth;来让div自动适应内容的高度。

Overflow内容超出容器的处理方式

Overflow:visible;默认值,在容器外可见。

Overflowhidden;在容器外隐藏

Overflowscroll; 出现滚动条

几乎所有浏览器都可以按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文件就是一个网页,一个网站则是网页的集合。

练习题:

  1. 写一首古诗:《登黄鹤楼》

每一行都放在一个段落P标签中,将所有的P标签背景色设置为黄色,

第一行用ID选择器设置为红色,第二行用类选择器设置绿色

  1. 制作一个一行两列的表格,左侧是所有名字的名字,右侧是一个内嵌页,将班级所有同学资料做成一个网页,轮流切换显示在内嵌页中。
  2. 写古诗:《赠汪伦》或《静夜思》

第一行使用内嵌式,微软雅黑,红色,48px

第二行使用内部样式,黑体,蓝色,42px

第三行使用外部样式,华文行楷,紫色,36px

第四行与第二行一样,要求使用分组选择器实现。

 

标签:

版权申明:本站文章部分自网络,如有侵权,请联系:west999com@outlook.com
特别注意:本站所有转载文章言论不代表本站观点,本站所提供的摄影照片,插画,设计作品,如需使用,请与原作者联系,版权归原作者所有

上一篇:我的ASP.NET学习笔记01HTML基础

下一篇:SASS简介及使用方法