简单了解并使用CSS

CSS(Cascading Style Sheets)层叠样式表

  作用:用于美化页面且修饰字体大小没限制

  css样式代码在<style></style>标签中书写,<style></style>标签放置在<head>标签中

  格式规范:

选择器名称{ 属性名:属性值;属性名:属性值;..............}
选择器:指定css样式作用在哪些html标签之上
如果属性值有多个则用空格隔开

CSS注释:/* CSS注释内容 */

CSS选择器:元素选择器、类选择器、id选择器

元素选择器:(元素==标签) 选择CSS样式代码作用于对应标签名的标签上

类选择器:class属性

格式:

.类名{.........}
源代码:
    <span class="类名">xxxx</span>

id选择器:id的属性值必须在本页面是唯一的      特点:更集聚针对性

格式:

#id值{....}
源代码:
    <span id="id值">xxxx</span>

基本选择器的结合方式: 层级关系

格式:

  选择器1 选择器2 .....{............}           寓意:选择器1下的选择器2

边框属性:  所有的html标签都有边框,默认边框不可见

设置边框的格式:宽度 样式 颜色

线条样式:solid 实线、 none 无边、 double 双线

背景颜色设置的两种方式:1.英文单词  2.颜色代码 格式:#红绿蓝 每一个颜色用两个16进制位数表示

例如:#ff1100 红色:ff;绿色:11;蓝色:00      (用于微调颜色)

float浮动属性:

格式:   选择器{float: 属性值}

常用属性值:none 元素不浮动 (默认)、left 元素向左浮动、 right 元素向右浮动

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

格式:选择器{dispaly: 属性值}

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

字体样式: font-size 设置字体的大小、 color 设置字体的颜色

CSS盒子模型:

设置css边框大小:border-top : xx;  border-bottom : xx;  border-left : xx;  border-right : xx

内边距padding:css边框里面内容体的距离

格式:padding-top : xx;  padding-bottom : xx;  padding-left : xx;  padding-right : xx

外边距margin:css边框与边框的距离

格式:margin-top : xx;  margin-bottom : xx;  margin-left : xx;  margin-right : xx

css样式和html的结合方式:

内部样式:

  (适合针对性)行内样式:通过style属性来设置元素的样式

   例:

<a style="xxxx:xxxx;">xxxxxxxxxx</a>

  (适合在页面中进行复用)标签方式

  例: 

<style>xxxxxxxxxxxxxx</style>

外部样式:

外部样式: <link/>又称为链入式,是将所有的样式放在一个或多个以.css为拓展名的外部样式表文件中,通过<link/>标签将样式连接到html文档中。

格式:<link rel="stylesheet" type="text/css" href="css文件路径"/>

rel="stylesheet" 固定值 表示样式表

type="text/css" 固定值 表示css类型

href 表示css文件位置

以上就是css的基本介绍。 注:仅适合给后端人员了解css,前端人员不太适合,因为不够全面。

                                               加油!

                                         时间:2020-03-20 01:15:44

猜你喜欢

转载自www.cnblogs.com/Charles-H/p/Learning_CSS.html