学习CSS,这些内容你都知道了吗?

  • CSS介绍
  • 引入css样式表方法
  • CSS选择器
  • CSS常用属性

CSS介绍:

  • CSS全称是(Cascading Style Sheet)层叠样式表;
  • 层叠:层叠就是对一个元素多次设置同一个样式
特点:

1)丰富的样式定义

  • CSS提供了丰富的文档样式外观,以及设置文本和背景属性的能力;
  • 允许为任何元素创建边框,以及元素边框与其他元素间的距离,以及元素边框与元素内容间的距离;
  • 允许随意改变文本的大小写方式、修饰方式以及其他页面效果。

2)易于使用和修改

  • CSS可以将样式定义在HTML元素的style属性中
  • 可以将其定义在HTML文档的header部分
  • 可以将样式声明在一个专门的CSS文件中,将所有的样式声明统一存放,进行统一管理。

3)多页面应用

  • CSS样式表可以单独存放在一个CSS文件中,这样我们就可以在多个页面中使用同一个CSS样式表。

4)页面压缩

  • CSS样式表的复用更大程序的缩减了页面的体积,减少下载的时间。

引入css样式表方法:

1)行内样式

  • 直接使用标记的style属性
style=" width:100px; height:100px; background-color:#F00;”

2)内嵌样式

  • 使用<style></style>标记,将样式写在<style>标记内
  • <style>标记要指定type属性为text/css

3)链接样式(外链式)

  • 将CSS写入单独的一个文件中,注意该文件的文件扩展名为 .css
  • 在HTML文档中使用<link>标记引入css文件
  • <link>标记需要指定两个属性:type和rel
    例:
< link type=“text/css” rel=“stylesheet” href=“sy.css" />

CSS选择器

1)通配符选择器

  • 选择对象:所有标签
  • 语法:
* {
font-family: "宋体";
}

2)类型(标记)选择器

  • 选择对象:使用标签名做选择符
  • 语法:
p {
font-size: "8";
}

3)ID选择器

  • 选择对象:对应id名的元素
  • 语法:
#idname {
…
}

4)类(class)选择器

  • 选择对象:使用此类名的元素
  • 语法:
.classname {
…
}

5)包含选择器

  • 选择对象:被嵌套标签包含的元素
  • 语法:
选择符a 选择符b {
…
}

CSS常用属性:

1)CSS字体与文本样式

  • font-family:设置文本的字体类型;
  • font-size:设置文本的字体大小;
  • font-style:设置文本的字体样式;
  • font-weight:规定字体的粗细;
  • color: 设置文本的颜色
  • letter-spacing:设置字符间距
  • line-height:设置文本行高
  • text-align:设置文本的对齐方式

2)CSS边框和背景相关属性

  • border:设置所有边框属性;
  • border-width:设置四条边框的宽度;
  • border-color: 设置四条边框的颜色;
  • background: 设置所有的背景属性;
  • background-color: 设置元素的背景颜色;
  • background-image: 设置元素的背景图像;

3)CSS列表和表格相关属性

  • list-style:在一个声明中设置所有的列表属性;
  • list-style-image:将图像设置为列表项标记;
  • list-style-position: 设置列表项标记的放置位置;
  • list-style-type: 设置列表项标记的类型;
  • border-collapse:设置是否把表格边框合并为单一的边框;
  • border-spacing:设置分隔单元格边框的距离;
  • caption-side:设置表格标题的位置,默认在上面;
  • empty-cells:设置是否显示表格中的空单元格;

文章结尾分享给大家一些基础的html,css面试题,喜欢这篇文章可以点赞加关注哦!还有更多html,css,JavaScript,Vue相关面试题,需要的戳这里,免费分享。

1,link和@import的区别?
2,如何理解标签语义,它有哪些好处?
3,css的选择符有哪些,优先级如何计算?
4,行内元素和块级元素举几个例子?
5,写出ul、ol、dl三种列表的html结构?
6,src与href的区别?

本文章由javascript技术分享原创和收集

发表评论 (审核通过后显示评论):