css基本使用

2023-03-13 18:42| 来源: 网络整理| 查看: 265

1、css

css的文件的引入方式

# 第一种引入方式 head标签中引入 head标签中引入 /* 选择器{css属性名称:属性值;css属性名称:属性值;} */ div{ /* css注释 */ width: 200px; height: 200px; background-color: red; } # 第二种引入方式外部文件引入工作中常用的创建一个css文件,stylesheet文件,比如test.css文件里面写上以下代码 div{ /* css注释 */ width: 200px; height: 200px; background-color: red; } 在想使用这些css样式的html文件的head标签中写上下面的内容 href对应的是文件路径 # 第三种引入方式内联样式: 2、css选择器

基本选择器：元素选择器、id选择器、类选择器

属性选择器、后代选择器、组合选择器（通过逗号连接）

（1）元素选择器

div{width:100px;} 标签名称{css属性:值}

（2）id选择器

html示例代码: css写法: #d1{ background-color: green; width: 100px; height: 100px; }

（3）类选择器

html代码: 李晨浩李海煜张建志 css写法 .c1{ background-color: green; width: 100px; height: 100px; }

（4）属性选择器

HTML代码李晨浩李海煜 css写法: [xx]{ 属性查找 background-color: green; width: 100px; height: 200px; } [xx='ss']{ 属性带属性值查找 background-color: green; width: 100px; height: 200px; }

（5）后代选择器

html代码示例: 李晨浩李海煜张建志 xxxxxxx css代码: div a{ color:orange; /* 字体颜色 */ }

（6）组合选择器（通过逗号连接）

html代码李晨浩 xxx222 李海煜张建志 xxxxxxx 官人,你好! css代码: 注意:a标签字体颜色设置,必须找到a标签才能设置 #d1 a,#d3 a{ background-color: pink; color:yellow; } 3、css样式

高度宽度、字体、字体格式、颜色、背景、边框、盒子模型、内边距、外边距、display属性、浮动

（1）高度宽度

html代码: div1 span1 css写法: div{ height: 100px; width: 100px; background-color: pink; } span{ height: 100px; width: 100px; background-color: green; } width: 50%; 宽度高度可以设置百分比,会按照父级标签的高度宽度来计算

（2）字体

html代码: 窗前明月光,地上鞋三双! css写法: font-size: 20px; /* 默认字体大小是16px */ color:green; /* 字体颜色 */ /*font-family: '楷体','宋体'; !* 字体格式 *!*/ font-weight: 400; /* 字体粗细 100-900,默认是400 */

（3）字体格式

html代码: 只身赴宴鸡毛装!!! css代码: height: 100px; width: 200px; background-color: yellow; text-align: center; 水平居中 /*text-align: right;*/ line-height: 100px; 和height高度相同,标签文本垂直居中

（4）颜色

三种方式: 英文单词:red; 十六进制: #ff746d; rgb: rgb(155, 255, 236); 带透明度的: rgba(255, 0, 0,0.3); 单纯的就是颜色透明度标签透明度:opacity: 0.3; 0到1的数字,这是整个标签的透明度

（5）背景

html代码: css写法: /*background-color: #ff746d;*/ /*background-color: rgb(155, 255, 236);*/ /*background-image: url("fage.png");*/ url写图片路径,也可以是网络地址路径 /*background-repeat: no-repeat;*/ /*background-repeat: repeat-y;*/ /*background-position: right top;*/ /*background-position: 100px 50px;*/ /* 简写方式 */ background: #ff0000 url("fage.png") no-repeat right bottom;

（6）边框

html代码都是同学装鸡毛! css写法: /* 边框简写方式,对四个边框进行设置 */ /*border:1px solid red;*/ /*border-left: 1px solid green;*/ /*border-top: 1px solid blue;*/ border-width: 5px; 边框宽度 border-style: dashed; 边框样式 border-color: aqua; 边框颜色

（7）盒子模型

占用空间大小 margin: 外边距距离其他标签或者自己父级标签的距离 padding: 内边距内容和边框之间的距离 border: 边框 content: 内容部分设置的width和height

（8）内边距

html代码: 英姿飒爽雄鸡装,飞上枝头变凤凰! css写法: width: 200px; height: 100px; border: 4px solid red; /*padding: 6px 8px;*/ /*padding: 4px 2px 6px 8px;*/ /*padding-left: 20px;*/ /*padding-top: 20px;*/ /*padding-right: 20px;*/ /*padding-bottom: 20px;*/

（9）外边距

html代码: 英姿飒爽雄鸡装,飞上枝头变凤凰! css写法: .c1{ background-color: red; height: 100px; width: 100px; /*margin-left: -1000px;*/ /*margin: 10px 15px;*/ } .c2{ background-color: green; height: 20px; width: 20px; /*margin: 10px 15px;*/ margin-left: 20px; }

（10）display属性

示例: html代码: 我是span标签鹅鹅鹅,曲项向天歌! 拔毛烧开水,铁锅炖大鹅! css写法: span{ /*display: block;*/ } .c1{ background-color: red; height: 100px; width: 100px; /*display: inline;*/ /*display: inline-block;*/ display: none; } .c2{ background-color: green; height: 100px; width: 100px; } display的几个值: inline: 将块级标签变成了内联标签 block:将内联标签变成块级标签 inline-block: 同时具备内联标签和块级标签的属性,也就是不独占一行,但是可以设置高度宽度 none: 设置标签隐藏

（11）浮动

浮动的元素,不独占一行,并且可以设置高度宽度 html代码 css样式 body{ margin: 0; } .c1{ background-color: red; height: 100px; width: 200px; float: left; } .c2{ background-color: brown; height: 100px; width: 200px; float: right; } .c3{ background-color: pink; height: 100px; width: 100%; }

浮动,造成父级标签塌陷的问题,没有高度了

解决父级标签塌陷问题:

方式1: 给父级标签加高度方式2: 清除浮动:clear属性方式3: 常用 .clearfix:after{ content: ''; display: block; clear: both; } html代码: 方式4: 给父级标签css属性设置overfloat：hidden

【本文地址】

公司简介

联系我们