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

CSS的基础概念CSS的作用就是对网页中元素进行更精细的美化在网页中加入CSS的三种方法
  • 内嵌式:直接在HTML标签中添加style属性,在style属性值里面书写css
  • 比如:

    今天天气一般</p>

  • 内部样式:是将CSS的内容书写在本网页中
  • 开始与结束标签之间的样式表。
  • 外部样式表:就是将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标签,比如:段落PA,TABLE,IMG
  • 在样式表中直接书写html标签名,比如:
  • P{}这样就能够将网页中所有的段落

    标签的背景色,一次性改变。组合选择器(层级选择器)我们可以使用层级选择器来根据选择器之间的关系匹配到相应的html元素,选择器之间用空格分隔,左边的选择器比右边的选择器高一个层级。意思就是说,右边的选择器必须包含在左边的选择器之中才行。比如:

    .x1 .x2{color:red;}
    分组选择器通常运用与多个选择器代的表多个html元素同时设置相同的样式,多个选择器之间用逗号分隔。比如:
    .a1, .a3{color:blue;}
    Css字体设置设置字体颜色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-width10pxBorder-color:边框颜色 如:border-colorblackBorder-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>标签特性:
  • 在默认情况下,两个div不能够同时处于同一行。
  • 一边加载一边显示,因此可以增强用户体验。
  • 两个div必须都设置了widthheight属性。并且两个div的宽度的宽度之合不能超过父容器的宽度。
  • 两个div必须都设置了float属性。
  • 在不设置宽度高度的情况下,默认宽度是父容器的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-bottomPosition属性
  • Absolute(绝对)
  • Relative(相对)
  • 浮动层要想让一个元素比如:div浮动在网页正文的上方,需要两个div相配合才能完成。
  • 必须要有两个是父子嵌套关系的div
  • 这两个div中父divcss属性中包含positionrelative;子divcss属性中包含positionabsolute
  • 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文件就是一个网页,一个网站则是网页的集合。练习题:
  • 写一首古诗:《登黄鹤楼》
  • 每一行都放在一个段落P标签中,将所有的P标签背景色设置为黄色,第一行用ID选择器设置为红色,第二行用类选择器设置绿色
  • 制作一个一行两列的表格,左侧是所有名字的名字,右侧是一个内嵌页,将班级所有同学资料做成一个网页,轮流切换显示在内嵌页中。
  • 写古诗:《赠汪伦》或《静夜思》
  • 第一行使用内嵌式,微软雅黑,红色,48px第二行使用内部样式,黑体,蓝色,42px第三行使用外部样式,华文行楷,紫色,36px第四行与第二行一样,要求使用分组选择器实现。 

    相关内容推荐