欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识！
您现在的位置是： 首页  >  IT编程

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

程序员文章站 2022-06-21 10:31:19
CSS的基础概念 CSS的作用就是对网页中元素进行更精细的美化 在网页中加入CSS的三种方法 比如：

开始与结束标签之间的样式表。 然后：在html网页中使用： 或 将外部样式表引入到当前网页中来。 ......

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标签，比如：段落P，A,TABLE,IMG

  1. 在样式表中直接书写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>标签

特性：

  1. 在默认情况下，两个div不能够同时处于同一行。
  2. 一边加载一边显示，因此可以增强用户体验。
  3. 两个div必须都设置了width、height属性。并且两个div的宽度的宽度之合不能超过父容器的宽度。
  4. 两个div必须都设置了float属性。
  5. 在不设置宽度高度的情况下，默认宽度是父容器的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属性

  1. Absolute（绝对）
  2. Relative（相对）

浮动层

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

  1. 必须要有两个是父子嵌套关系的div。
  2. 这两个div中父div的css属性中包含position：relative；子div的css属性中包含position：absolute。
  3. 子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文件就是一个网页，一个网站则是网页的集合。

练习题：

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

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

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

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

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

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

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

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

 

上一篇： 完美运行安卓软件 黑莓Q5多彩鉴赏

下一篇： RHEL7系统管理之资源管理

推荐阅读