CSS相关知识及入门

CSS(层叠样式表)

作用

修饰HTML页面,美化

CSS代码规范

  1. 放置规范
    • <style>标签内容体中书写样式代码
    • <style>标签放置在<head>标签内、
  2. 格式规范
    • 选择器名称{属性名:属性值; .....}
    • 选择器:指定CSS样式作用在哪些HTML标签上
  3. 代码规范
    • 属性名和属性值之间是键值对关系
    • 属性名和属性值之前使用连接,最后用;结束
    • 如果一个属性名有多个属性值,那多个值之间使用空格分开
    • CSS注释:/*注释内容*/

CSS选择器

元素选择器

  • 就是以HTML中的标签名作为选择器名称
  • 选择CSS代码作用于对应标签名的标签上
  • 适用于将相同样式作用于多个同名标签上

类选择器

  • 给相应的标签设置class属性
.类名{
    /*CSS样式代码*/
}
  • 适用于将样式一次作用在相同类名的标签上

id选择器

  • 每个HTML标签都有一个id属性,id属性值必须在本页面是唯一的
#id值{
    /*CSS样式代码*/
}
  • 适用于将样式作用某个标签上

层级关系

对选择器进行组合,表现出层级关系,从而更加针对性把样式作用于某些标签上

/*选择器1下的选择器2*/
选择器1 选择器2...{
    /*CSS样式代码*/
}

常用样式

边框属性

  • border

    /*1像素粗的 实线 红色边框*/
    border:1px solid red;
    /*
        线条形式:
            solid 实线 
            none 无边 
            double 双线
    */
    
  • width

    /*宽度300像素*/
    width:300px
    
  • height

    /*高度100像素*/
    height:100px
    
  • background-color

    /*背景颜色红色*/
    background-color:red
    /*
    背景颜色设置主流方式:
    	1. 英文单词
    	2. 颜色代码(每一个颜色用16进制位数表示)
    */
    

布局

/*浮动:居右*/
选择器{
    float:right;
}

常用属性值:
none 元素不浮动
left 元素向左浮动
right 元素向右浮动

注意:
设置浮动属性后,会脱离原有的文档流(即原有的板式),从而影响其它元素的样式,所以设置浮动后,页面样式需要重新调整

转换

  • 块元素:以区域块方式出现,每个块标签独自占据一整行或多整行,块结束会自动换行

    • 常见块级元素:

      <h1> <p> <div> <ul>

  • 行内元素:根据内容多少来占用行内空间,不会自动换行

    • 常见的行内元素<span> <a>

display属性可以使得元素在行内元素和块元素之间相互转换

选择器{
    display:属性值;
}

常用属性值:
	block:将元素变为块
	inline:将元素变为行内元素
	none:此元素将被隐藏,不显示,也不占用空间

字体

/*设置字体大小*/
font-size:

/*设置字体颜色*/
color:

CSS盒子模型

所有的HTML元素都可以看成一个四边形

设置盒子的形式,就是盒子模型

边框(border)

HTML元素盒子的框体

  • 上边框(border-top)
  • 下边框(border-buttom)
  • 左边框(border-left)
  • 右边框(border-right)

通用设置(上下左右都设置):border:1px solid;

内边距(padding)

HTML元素里的内容体到HTML元素边框的距离

  • 左边距(padding-left)
  • 右边距(padding-right)
  • 上边距(padding-top)
  • 下边距(padding-buttom)

通用设置:padding:10px;

外边距(margin)

一个HTML元素框体到另一个HTML元素框体的距离

  • 上边距(margin-top)
  • 下边距(margin-buttom)
  • 左边距(margin-left)
  • 右边距(margin-right)

通用设置:margin:10px;

CSS与HTML的结合方式

内部样式

在标签内书写style属性

<a style="color:red;">这是一个样式示例</a>

使用style标签,在此标签体内书写CSS样式

<style>
    a{
        color:red;
    }
</style>

外部样式

适用于不同页面的CSS样式复用

抽成一个CSS文件,然后在HTML中调用

如何调用?使用link标签(写在head标签当中)

<link rel="stylesheet" type="text/css" href="css文件路径"/>
<!--
	rel属性:固定值,表示样式表
	type属性:固定值,表示CSS类型
	href属性:表示CSS文件位置
-->

posted @ 2020-07-31 08:10  笔架山Code  阅读(115)  评论(0编辑  收藏  举报