css入门
css
层叠样式表,作用是为标签加效果
<div style="background: red">123</div>
基本选择器
元素选择器
标签名称{css属性:值}
div{width:100px;}
id选择器
id{}
html代码: <div id="d1"> </div> css写法: #d1{ background-color: green; width: 100px; height: 100px; }
类选择器
.class1{属性:值}
html代码: <div id="d1" class="c1"> baby </div> <div id="d2" class="c2"> 热巴 </div> <div id="d3" class="c1"> 唐艺昕 </div> css写法: .c1{ background-color: green; width: 100px; height: 100px; }
属性选择器
html代码: <div id="d5" class="c1" xx="ss"> baby </div> <div id="d2" class="c2" xx="kk"> 热巴 </div> css写法: [xx]{ /*属性查找*/ background-color: green; width: 100px; height: 200px; } [xx='ss']{ /*属性带属性值查找*/ background-color: green; width: 100px; height: 200px; }
后代选择器
html代码:
div id="d1" class="c1" xx="ss"> <span> <a href="http://www.baidu.com">baby</a> </span> </div> <div id="d2" class="c2" xx="kk"> <a href="http://www.baidu.com">热巴</a> </div> <div id="d3" class="c1"> 唐艺昕 </div> <a href="http://www.baidu.com">xxxxxxx</a>
div a{ color: yellow;}
组合选择器
div,a{ color: yellow;}
html代码: div id="d1" class="c1" xx="ss"> <span> <a href="http://www.baidu.com">baby</a> </span> </div> <div id="d2" class="c2" xx="kk"> <a href="http://www.baidu.com">热巴</a> </div> <div id="d3" class="c1"> 唐艺昕 </div> <a href="http://www.baidu.com">xxxxxxx</a> css代码: 注意:a标签字体颜色设置,必须找到a标签才能设置 #d1 a,#d3 a{ background-color: pink; color:yellow; }
css样式引入方式
head标签中引入
<style> /* 选择器{css属性名称:属性值;css属性名称:属性值;} */ div{ 用了基本选择器中的元素选择器 width: 200px; height: 200px; background-color: red; } </style> 给所有div标签加样式
外部文件引入
(工作中常用的)
创建一个css文件,stylesheet文件,比如test.css文件。里面写上以下代码 div{ /* css注释 */ width: 200px; height: 200px; background-color: red; } 在想使用这些css样式的html文件的head标签中写上下面的内容 <link rel="stylesheet" href="test.css"> href对应的是文件路径
内联样式
<div style="background-color: red;height: 100px;width: 100px;"></div>
multiple="multiple"?
css样式相关
display属性
改变标签属性:
inline: 将块级标签变成了内联标签
block:将内联标签变成块级标签
inline-block: 同时具备内联标签和块级标签的属性,也就是不独占一行,但是可以设置高度宽度
none: 设置标签隐藏 (了解,后面用)
html代码
<span> 我是span标签 </span> <div class="c1"> 鹅鹅鹅,曲项向天歌! </div> <div class="c2"> 白毛浮绿水 </div>
css写法
span{display: block;} 将内联标签变成块级标签 .c1{ background-color: red; 内容背景颜色 height: 100px; 内容背景高度 width: 100px; 内容背景宽度 display: inline; 将块级标签变成内联标签 /*display: inline-block;*/ 同时具备内联标签和块级标签的属性 }
颜色设置
英文单词:red; 十六进制: #ff746d; rgb: rgb(155, 255, 236); 背景颜色透明度: rgba(255, 0, 0,0.3); 单纯的就是颜色透明度 标签透明度(例如背景图片透明度): opacity: 0.3; 0到1的数字,这是整个标签的透明度
盒子模型
标签占空间总大小=margin+border+padding+content
html代码
<div> 窗前明月光 </div>
css写法
div{ width: 200px; 内容宽度 height: 100px; 内容高度 background-color: rgba(255, 0, 0,0.3); 内容背景颜色 background-image: url("fage.png"); 内容背景图片 url写图片路径,也可以是网络地址路径 margin: 10px 15px 外边距:上下 左右 距离无颜色 border: 4px solid red; 边框:大小 样式 颜色 padding: 4px 2px 6px 8px; 上4右2下6左8 内边距 }
margin 外边距
距离其他标签或者自己父级标签的距离
html代码
<div> 窗前明月光 </div> <div class="c1"> <div class="c2"> </div> </div>
css写法
.c1{ background-color: red; height: 100px; width: 100px; /*margin: 10px 15px;*/ 上下10,左右15 margin-left: -10px; } .c2{ background-color: green; height: 20px; width: 20px; /*margin: 10px 15px;*/ margin-left: 20px; }
让外边距为零
body{ margin: 0; }
border 边框
html代码
<div> 窗前明月光 </div>
css写法
边框简写方式,对四个边框进行设置 <div style="border:1px solid red; "> /*宽度/样式/颜色*/ 窗前明月光 </div> order-left: 1px solid green; 单对左边边框设置 border-top: 1px solid blue; 上边边框 细写 border-width: 5px; 边框宽度 border-style: dashed; 边框样式 border-color: aqua; 边框颜色
padding 内边距
内容和边框之间的距离
html写法
<div style="padding:1px solid red; "> /*宽度/样式/颜色*/ 窗前明月光 </div> padding: 6px 8px; 上下6左右8 padding: 4px 2px 6px 8px; 上4右2下6左8 padding-left: 20px; padding-top: 20px; padding-right: 20px; padding-bottom: 20px;
content: 内容部分
背景
html代码
<div> 窗前明月光 </div>
css写法
background-color: #ff746d; 背景颜色 background-color: rgba(255, 0, 0,0.3);背景颜色 background-image: url("fage.png"); url写图片路径,也可以是网络地址路径 background-repeat: no-repeat; 不重复 background-repeat: repeat-y; y方向上 background-position: right top; 右上 (lift top,center top,right top,center bpttom) background-position: 100px 50px; 离左边边多少,离右边多少 一般通过css设置 简写方式: background: #ff0000 url("fage.png") no-repeat right bottom;
高度宽度
css写法: div{ height: 100px; width: 100px; background-color: pink; } span{ !!!行级标签不能设置高度宽度 height: 100px; width: 100px; background-color: green; }
可以设置百分比,会按照父级标签的高度宽度来计算
<div class="c1"><div class="c2">234</div></div> css写法: .c1{ width: 200px; height: 100px; background: red; } .c2{ width: 50%; height: 50%; background: gold; }
字体相关
html代码
<div> 窗前明月光 </div>
css写法
font-size: 50px; /* 默认字体大小是16px */ color:green; /* 字体颜色 */ font-family: '楷体', '宋体'; 浏览器如果不支持第一个选第二个。。。 font-weight: 400; /* 字体粗细 100-900,默认是400 */
字体对齐
字体对齐
html代码: <div> 窗前明月光 </div>
css写法
div{ height: 100px; width:200px; background-color: yellow; text-align: center; 水平居中 line-height: 100px; 和height高度相同,标签文本垂直居中 /*垂直居中*/ text-align: right;右对齐
浮动
浮动的元素,不独占一行,并且可以设置高度宽度
html代码
<div class="cc"> <div class="c1"></div> <div class="c2"></div> </div> <div class="c3"></div>
scc写法
body{ margin: 0; } 要浮动,先让默认为8的外边距为0 c1{ background-color: red; height: 100px; width: 200px; float: left; } .c2{ background-color: green; height: 100px; width: 200px; float: right; } .c3{ background-color: pink; height: 100px; width: 100%;}
塌陷解决
父级标签没有高度了,子标签一浮动,会让下面的标签顶上来
方式1:给父级标签加高度 不常用
方式2:清除浮动(clear属性) 不常用
.c3{ background-color: pink; height: 100px; width: 100%; clear: both; (这个标签上面不允许有浮动的元素) }
方式3:子标签底下加一个空白的带clear属性的div标签 常用
html代码:
<div class="cc clearfix"> <div class="c1"></div> <div class="c2"></div> <div style="clear: both;"></div> </div> <div class="c3"></div>
方式4:div标签后面用after拼一个内容为空的带clear属性的块
需要先用伪元素选择器
html代码:
<div class="cc clearfix"> <div class="c1"></div> <div class="c2"></div> </div> <div class="c3"></div>
css代码:
.clearfix:after{ content:''; 设置内容 display:block; 设置块 clear:both; 设置clear属性 }
伪元素 after
html代码:
<div> 一段文字 <div>
css代码:
div{ background-color:pink; height:100px; width:200px;} div:after{ content:'?'; color:white;}
伪类 hover
html代码:
<divclass="c1"> </div>
css写法:
.c1{ background-color:red; height:300px; width:300px;} .c1:hover{ /*鼠标悬浮时设置效果*/ /*background-color:green;*/ background-image:url("a.png"); cursor:pointer;} pointer 手 default 箭头,crosshair 十字,progress 箭头和沙漏
悬浮显示其他标签效果
html代码:
<divclass="c1"> <divclass="c2"> </div> </div>
css写法:
.c1{background:black; height:400px; width:400px; } .c2{background:aqua; height:40px; width:40px; display:none; 改display为隐藏属性 } .c1:hover.c2{ display:block; 鼠标悬浮时显示c2,改display为块属性 }
positon 定位
做一些小的范围布局
html代码:
<div class="cc "> <div class="c1"></div> <div class="c2"></div> </div> <div class="c3"></div>
static 静态定位
也就是标签默认
relative 相对定位
相对于父级标签移动,原来的位置还占着,不会造成下面的标签顶上去的情况
css代码:
position:relative; left:100px; 离左边 top:-100px; 离上面 /*bottom:*/ 离下面 /*right:*/ 离右边
absolute 绝对定位
相对于父级标签移动,原来的位置不占着,会造成下面的标签顶上去的情况
css代码:
position:absolute; top:20px; left:80px;
fixed 固定定位
按照浏览器窗口的位置进行移动
html代码:
<spanclass="s1"><ahref="">返回顶部</a></span>
css代码:
.s1{ position:fixed; left:40px; bottom:20px; }
优先级
!important>行内样式>id选择器>类选择器>标签
越精准的定位优先级越高
继承
标签
类
id
!important
无敌
练习(下周一之前完成即可):
通过html和css完成小米商城首页的开发,暂不需要完成动态效果,有页
面展示效果就可以()
注意:前端页面效果可以通过很多种方式实现,没有标准答案,大家
可以参考小米官网源码,也可以根据自己想法去实现
上一篇: 调试webpack
推荐阅读
-
荐 Ajax技术的应用入门
-
PHP入门1 for循环
-
SQLite快速入门指南
-
[JavaScript](译)Stylelint: The Style Sheet Linter We’ve Always Wanted_html/css_WEB-ITnose
-
Codeforces Round #214 (Div. 2)??Dima and Salad_html/css_WEB-ITnose
-
oracle架构的基础知识(入门级)
-
JS访问Webservice的安全性问题_html/css_WEB-ITnose
-
Python面向对象之入门类和对象
-
docker-compose教程之安装使用和快速入门
-
怎么画人物头部?动漫人物头部绘画教程入门