您的位置: 首页  >  文章  >  CSS基础

CSS基础

分类: 文章 • 2022-10-12 23:56:53

CSS基础

CSS的使用：

行内样式：标签中指定style属性=“CSS属性：属性值；”
外部样式：

选择器{
CSS属性：属性值；
}

定义外部的css文件：01.css,然后在head标签中<link href="01.css" rel="stylesheet">

CSS基本格式：css属性(prooperties):css属性值（value）;

盒子模型

任何标签都可以看成是盒子（万物皆盒子）。网页布局使用div标签+CSS，将页面中的标签都看成是一个盒子，然后通过盒子模型的几个属性（padding/margin）设置内边距/外边距，指定当前标签的CSS样式
CSS基础
盒子模型的几个属性：

  • boder:盒子的厚度（边框的大小）
  • padding:盒子的内边距（边框的内边距）
  • magin：盒子的外边距（盒子和盒子之间的距离）

CSS选择器

1.标签选择器：在样式中写一个元素名称

<style>
标签名称{
class样式；
}
</style>

2.class选择器：需要在标签中指定class属性,类选择器的优先级大于标签选择器，并且同一个HTML页面中多个标签是可以指明同名的class属性

<style>
.class属性值{
class样式；
}
</style>

<div class="class属性值"></div>

3.id选择器,id选择器的优先级最高，大于类选择器，大于标签选择器（推荐），在同一个HTML中，标签的id属性值必须是唯一的，不能重复，因为在js中需要提供id值获取标签对象，必须id唯一标识

	<style>
    #id属性值{
    class样式；
    }
    </style>

<div id="id属性值"></div>

4.并集选择器

选择器1，选择器2{
CSS样式
}

5.交集选择器/后代选择器（选择器2是选择器1中的子标签）

选择器1 选择器2{
CSS样式
}

6.通用选择器：*

7.伪类选择器

CSS伪类：指定的是当前标签的状态

  • link状态：鼠标未访问过的状态
<style>
        a:link{
       /* 去掉下划线*/：text-decoration：none;
        /*设置颜色*/：color:#f12;   
         }
 </style>
  • hover状态：鼠标经过标签的时候的状态
<style>
        a:hover{
        /*设置下划线：*/：text-decoration：underline;
        /*设置颜色*/：color:#f00;   
         }
</style>
  • active（**状态）:鼠标点击了，但是没有松开的状态
<style>
        a:active{
        /*去掉下划线：*/ text-decoration：underline;
        /*设置字体*/：font-size: 24px;   
         }
</style>
  • visted：已经访问过了的状态（鼠标点击并且松开了）
<style>
        a:visted{
        /*设置字体*/：font-size: 24px;   
         }
</style>

CSS伪类选择器如果想要循环的效果展示就必须要遵循一定的规则：

  1. 在css选择器中，a:hover 必须置于a:link和a:visted之后，才是有效的
  2. 在css选择器中，a:active必须置于a:hover之后，才是有效的
  3. 伪类选择器对大小写不敏感

practice:一个表格，当鼠标经过每一行的时候，除过表头，背景色变为蓝色

CSS中的常用属性：

1.文本属性

字符间距：letter-spacing：
文本排列方式：text-align:center：
文本修饰：text-decoration：

  • 去掉下划线：none
  • 加上下划线：underline
  • 上划线：overline
  • 中划线：line-through

单词间距：css属性中，将两个字组成一个单词：word-spacing：10px

2.字体属性

字体类型：font-family：“系统中存在的字体类型”
字体大小：font-size: 12px
字体样式：font-style:

  • normal(默认)
  • italic（斜体）
  • oblique（加粗斜体）

字体粗细程度：font-weight:

  • blod(适当加粗)

字体的简写属性（推荐） font: font-style属性值 font-weight属性值 font-size属性值 font-family属性值

浮动属性(对选择器起作用):float:

  • left
  • right
    当前某个标签设置了了浮动，那么这个标签就脱离了当前文档流（html源文件从上往下的顺序加载），直到遇到边框就停止浮动，文档流后面排队的元素就会依次填充当前文件流

有时候考虑页面布局：带浮动属性标签会影响后面标签的布局，需要设置当前块左右两边不浮动。

左右两边不浮动属性：clear:both
列表属性：

<style>
ul{
先清空列表样式
list-style-type:none;
将指定图片设置为列表标记
list-style-image:url();
}
</style>
CSS背景

设置背景图片（默认x轴和y轴重复）：background-image:url（）;
设置背景颜色：background-color:
设置图片是否重复已经如何重复：background-repeat：

  • norepeat 不重复（默认显示完整图片在左上角）
  • repeat 重复(默认)：

背景图片起始位置：background-position：

  • top left（top是指图片的顶部位置，left是指浏览器的左边位置，默认）
  • center center
  • bottom right
  • （图片的top center bottom与浏览器的left center right可以任意组合）

背景的简写属性(推荐)：background:NNN XXX YYY zzz;

边框属性

表格的边框线合并：border-collapse:collapse

div边框属性：如果块标签想要指定边框的显示效果，就必须要指定边框的样式

<style>
div{
/*设置边框四个边的颜色*/ 
border-top-color:#00f;
border-left-color:#00f;
border-right-color:#00f;
border-bottom-color:#00f;
/*边框颜色的简写属性*/ border-color:上 右 下 左；

/*设置边框四个边框线宽度*/
border-top-width:10px;
border-left-width:10px；
border-right-width:10px；
border-bottom-width:10px；
/*边框宽度的简写属性*/ border-width:上 右 下 左；

/*设置边框四个边框线的样式*/
border-top-style:solid；
border-left-style:double；
border-right-style:dashed；
border-bottom-style:dotted；
/*边框样式的简写属性*/ border-style:上 右 下 左；

边框的简写属性：border:边框宽度 边框样式 边框颜色
/*边框的颜色/宽度/样式，若某一边没有给定颜色，则会指定对边的颜色*/

}

</style>

CSS定位属性：position:

  • relative相对定位（相对于原来的元素定位）
  • absolute绝对定位（相对于父标签body的位置进行定位）
  • fixed 固定定位（不会随滚动条滚动，一般应用于网站中的广告，点击后跳转需使用js知识）
    设置定位属性后，需设置top,left属性，单位是像素

相关推荐