css基础

秦俊杰
197 阅读10分钟

CSS基础

1. css简介

  • 1.1 什么是 CSS？

    • CSS 指层叠样式表

    • 样式定义如何显示 HTML 元素

    • 样式通常存储在样式表中

    • 把样式添加到 HTML 4.0 中，是为了解决内容与表现分离的问题

    • 外部样式表可以极大提高工作效率

    • 外部样式表通常存储在 CSS 文件中

    • 多个样式定义可层叠为一个

  • 1.2 css规则由两个主要部分构成：选择器以及一条及多条声明

632877C9-2462-41D6-BD0E-F7317E4C42AC.jpg

2. css基础选择器

2.1 标签选择器

  • 优点：选择页面中某一类所有的标签
  • 缺点：只能全部选择为当前标签，不能差异化设置
//style放在head里
    <style>
        p {
            color: pink;
        }
    </style>
//p标签放在body里
    <p>男生</p>
    <p>男生</p>
    <p>男生</p>

2.2 类选择器

  • 可以差异化选择不同的标签，单独选一个或者某几个标签
    • 口诀：样式点定义，结构类(class)调用，一个或多个，开发最常用
    • 使用'.'进行标识，后面紧跟类名（自定义）
<style>
 .red {
       color: red;
   }
</style>
//根据情况使用class调用定义类名
    <p class="red">男生</p>
    <p>男生</p>
    <p>男生</p>
  • 多类名使用方式
    • 在class属性中写多个类名
    • 多个类名中间必须用空格分开
<div class="red font35">红色的大字</div>

2.3 id选择器

  • id选择器可以为标有特定id的HTML元素指定特定的样式，在css中id选择器以#定义
  • 口诀：样式#定义，结构id调用，只能调用一次，别人切勿使用
//使用'#'进行标识，后面紧跟类名（自定义）
<style>
 #red {
       color: red;
   }
</style>
//使用id调用
    <p id="red">男生</p>

id选择器和类选择器的区别在于使用次数上，类选择器可以使用被多次使用，id选择器一般用与页面唯一性元素上

2.4 通配符选择器

  • 通配符选择器使用"*"定义，表示选取页面中所有元素
  • 通配符选择器不需要调用，自动给所有的元素使用样式
//通配符选择器会把所有的标签都改为红色，无需调用
 * {
       color: red;
}

3. css复合选择器

  • 复合选择器是建立于基础选择器之上，对基本选择器进行组合形成的

3.1 后代选择器（重要）

  • 写法是把外层标签写在前面，内层标签卸载后面，中间用空格分隔，当标签发生嵌套时，内层标签就成为外层标签的后代
元素1 元素2 {样式声明}
  • 元素1和元素2中间用空格隔开
//head里面选择ol中的li
ol li {
         color: red;
        }
//此时之后ol标签里的元素会改变样式
<ol>
     <li>孩子1</li>
     <li>孩子2</li>
     <li>孩子3</li>
</ol>

3.2 子选择器（重要）

  • 子元素选择器只选择作为某元素最近一级的子元素
元素1>元素2 {样式声明}
  • 元素1和元素2之间用>号隔开
  • 元素2必须是亲儿子，其孙子，重孙之类都不归他管
//根据下面定义的类名，使用亲儿子选择器，中间用>隔开
.son>a{
       color: red;
   }
//此时，只有儿子才会被选中改变样式
<div class="son">
    <a href="#">儿子</a>
    <p>
         <a href="#">孙子</a>
    </p>
</div>
  • 扩展： last-child最后孩子选择器
    first-child第一孩子选择器
    nth-of-type找后代孩子，同样类型
    first-of-type找后代第一个同类型
    last-of-type找后代最后一个同类型

3.3 并集选择器（重要）

  • 并集选择器可以选择多组标签，同时为他们定义相同的样式，常用于集体声明
元素1,元素2 {样式声明}
  • 通过逗号（,）连接而成，任何形式的选择器都可以作为并集选择器的一部分
//当出现多个标签需要用相同样式时，标签之间逗号分隔即可同时选择，注意最后一个元素不加逗号
<style>
    div,
     p {
         color: pink;
     }
</style>
//div和p两个标签
<div>熊大</div>
<p>熊二</p>

3.4 伪类选择器（重要）

  • 伪类选择器书写的最大特点时用冒号(:)表示，常用于给链接添加特殊效果，或选择第一个，第n个元素

3.4.1 链接伪类选择器

  • 为了确保链接伪类选择器生效，四种伪类按照LVHA的顺序声明
    1. a:link 把未被访问的链接选出来
a:link {    
      color: #333;
      text-decoration: none;
  }   //把没有点击过的链接颜色设为黑色，不显示下划线，a代表使用链接标签
    1. a：visited选择点击过的（访问过的）链接
a:visited {
    color: antiquewhite;
}     //把点击过的链接颜色设置为淡黄色
    1. a:hover 选择鼠标经过的链接
a:hover {
      color: skyblue;
 }    //把鼠标经过的链接显示为青蓝色
    1. a:active 选择鼠标正在按下还没弹起的链接
a:active {
      color: green;
}   //把鼠标按下还没谈起时链接颜色设为绿色

3.4.2 focus伪类选择器

  • focus伪类选择器用于选取获得焦点的表单元素，一般情况下类表单元素才能获取
input:focus {
     background-color: azure;
}    //给input表单元素选取获得焦点

4. 元素特点和转换

  • 4.1 不同元素的特点
    • 块级元素特点：独占一行，可以改变宽高
    • 行内元素特点：一行可放好几个，不可设置宽高
    • 行内块元素特点：一行可放多个，可以改变宽高
  • 4.2 不同元素之间的转换
    • 行内元素转换为块级元素：dispaly:block；
    • 块级元素转换为行内元素：dispaly:inline;
    • 其他元素转换为行内块：dispaly：inline-block;

5. css字体属性

5.1 font-family设置字体系列

  • 各种字体之间必须使用英文状态下的逗号隔开
  • 一般情况下，如果有空格隔开的多个单词组成的字体，加引号
  • 尽量使用系统默认自带字体，保证在任何用户的浏览器中都能正确显示
p{font-family:"微软雅黑";}
div{font-family:Arial,"Microsoft Yahei","微软雅黑";}

5.2 font-size字号大小

  • px(像素)大小是网页的最常用单位

  • 谷歌浏览器默认的文字大小是16px

  • 不同浏览器可能默认显示的字号大小不一致，尽量给一个明确值大小，避免默认大小

  • 可以给body指定整个页面文字的大小

body{
      font-size:16px;
}   //直接给body指定整个界面大小为16px；标题大小需要另外指定

5.3 font-weight字体粗细

  • normal：正常字体，相当于number为400
  • bold：粗体，相当于number为700
  • bolder:特粗体
  • lighter：细体
  • number：可以通过数字来选择字体粗细程度
body{
      font-weight:400;
}   //实际开发中最好选择数字方式，来选择加粗或变细，注意不要单位

5.4 font-style字体样式

  • normal：正常字体，默认标准字体样式
  • italic： 显示斜体的字体样式
p{
    font-style:italic;
}   //倾斜字体，平常很多是给倾斜标签(em,i)改为不倾斜字体

6. css文本属性

6.1 color文本颜色

  • 可使用三种方式表示:
    • 预定义的颜色 （red，green，blue....）
    • 十六进制 （#FF0000,#FF6600....）
    • RGB代码 （rgb（255,0,0）或rgb（100%,0%,0%）....)
div{
   color:red;
}   //三种方式都可表示

6.2 text-align文本对齐

  • 有三种对齐方式：
    • left 左对齐（默认）
    • right 右对齐
    • center 居中对齐
div{
   text-align:center;
}  //此处设置居中对齐

6.3 text-decoration文本装饰

  • 四种装饰方式：
    • none 默认，没有装饰线（最常用）
    • underline 下划线，a链接自带下划线（常用）
    • overline 上划线（几乎不用）
    • line-through 删除线（不常用）
a{
    text-decoration：none；
}   //取消a链接默认下划线

6.4 text-indent文本缩进

  • 常用于首行缩进
p{
   text-indent:2em;
}   //可以使用像素为单位缩进，最常用使用em为单位，em是当前元素1个文字大小

6.5 text-height行间距

  • 常用于设置行间的距离（行高），可以控制文字行与行之间的距离
 p{
    line-height:26px;
 }  //上间距+下间距+文本高度=行间距

7. css的背景

7.1 背景颜色

  • background-color属性定义了元素的背景颜色
  • 一般情况下默认值是transparent（透明），也可手动指定背景颜色为透明色
background-color:颜色值;

7.2 背景图片

  • background-image属性描述了元素的背景图像
background-image:none|url(图片地址)   //可以使用none不设置图片和url插入图片

7.3 背景平铺

  • background-repeat属性添加背景图片平铺样式
background-repeat;repeat(平铺)，no-repeat（不平铺）,repeat-x（沿x轴平铺）,repeat-y(沿y轴平铺);

7.4 背景图片位置

  • background-position属性可以改变图片在背景中的位置
background-position:x y;
参数值说明
length百分数/由浮点数字和单位标识符组成的长度值
positiontop/center/bottom/left/right 方位名词
    1. 参数是方位名词
    • 当指定的两个值都是方位名词，则两个值前后顺序无关
      • center right和right center等价，跟顺序无关
      • 如果只制定了一个方位名词，另一个省略，则第二个值默认居中对齐
    1. 参数是精确单位
    • 如果参数值是精确坐标，那么第一个肯定是x坐标，第二个一定是y坐标
      • 如果只指定一个数值，那该数值一定是x坐标，另一个默认垂直居中
    1. 参数是混合单位
    • 如果指定的两个值是精确单位和方位名词的混合使用，则第一个值是x坐标，第二个是y坐标

7.5 背景图像固定

  • background-attachment属性设置背景图像是否固定或者随着页面的其余部分滚动
background-attachment:scroll | fixed  //背景图像默认是滚动的
参数作用
scroll背景图像是随对象内容滚动
fixed背景图像固定

8. 盒子模型

8.1 盒子模型的组成

  • css盒子模型包括：边框border，外边距margin，内边距padding和实际内容content box-model.gif

8.2 盒子模型边框border

  • border可以设置元素的边框，边框有三部分组成：边框宽度（粗细）边框样式 边框颜色 |属性|作用| |:--|:--| |border-width|定义边框粗细，单位是px| |border-style|边框的样式| |border-color|边框颜色|

语法：

border:border-width || border-style || border-color

8.3 表格细线边框

  • border-collapse属性控制浏览器绘制表格边框的方式
    • border-collapse:collapse;表示相邻边框合并在一起
border-collapse:collapse;

8.4 盒子模型内间距padding

  • padding属性用于设置内边距，即边框与内容之间的距离 |属性|作用| |:--|:--| |padding-left|左内边距| |padding-right|右内边距| |padding-top|上内边距| |padding-bottom|下内边距|

  • 使用padding对上下左右边距调整效果

8.5 盒子模型外间距margin

  • margin属性用于设置外边距，即控制盒子与盒子之间的距离，使用方式与padding类似 |属性|作用| |:--|:--| |margin-left|左外边距| |margin-right|右外边距| |margin-top|上外边距| |margin-bottom|下外边距|
  • 使用margin对上下左右外边距调整效果

8.6 两种盒子模型区别

8.6.1. 什么是盒子模型

  • CSS盒子模型就是在网页设计中经常用到的CSS技术所使用的一种思维模型。
  • 盒子模型（Box Modle）可以用来对元素进行布局，包括实际内容，内边距，边框，外边距这几个部分。
  • 盒子模型分为两种：
    • 第一种是W3C标准的盒子模型（标准盒模型）
    • 第二种IE标准的盒子模型（怪异盒模型）

8.6.2. 标准盒模型与怪异盒模型的表现效果的区别之处：

  • 1、标准盒模型中width指的是内容区域content的宽度；height指的是内容区域content的高度 img
W3C标准盒模型下盒子的大小 = width （ content ） + border + padding + margin
  • 2、怪异盒模型中的width指的是内容、边框、内边距总的宽度；height指的是内容、边框、内边距总的高度 img
怪异盒模型下盒子的大小 = width （ content + border + padding ） + margin

8.6.3 box-sizing的定义和用法

  • box-sizing属性是用来切换盒模型
  • box-sizing的默认属性是content-box
    • box-sizing: content-box 是W3C盒子模型
    • box-sizing: border-box 是IE盒子模型
    • box-sizing: inherit 规定应从父元素继承 box-sizing 属性的值
avatar
文章
阅读
粉丝