样式表: 语法: 选择器{}: 行内样式表 : 内部样式表 : 外部样式表 :
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>css入门</title>
<!--外部样式表的引入-->
<link rel="stylesheet" href="css/first.css">
<style>
/*内部样式表*/
div{
background: paleturquoise; /*背景*/
font-weight: bold; /*加粗*/
}
</style>
</head>
<body>
<!--
css 层叠样式表
添加的语法:
选择器 {
样式 -> 样式名 : 样式值;
属性名 : 属性值;
....
}
如何为添加css?
行内样式表 : 在元素行的内部为元素添加样式
优先级最高,但是如果想要我多个元素添加相同样式的时候麻烦,不便于后期维护
内部样式表 : 在html的内部为html中的元素添加样式
在head中添加一对标签style标签,在标签对中添加样式
外部样式表 : 在html的外部为html中的元素添加样式
样式表的优先级: 行内的优先级最高,谁离元素最近谁的优先级最高
选择器
常用样式
-->
<!--行内样式表-->
<div style="color:green;font-size: 20px;background: hotpink">我是div1</div>
<div style="color:green;font-size: 20px;">我是div2</div>
<div style="color:green;font-size: 20px;">我是div3</div>
</body>
</html>
创建一个 css 文件 外部样
div{
text-align: center; /*内容在元素中水平居中显示*/
background: bisque;
}
基础选择器: id选择器 : 类选择器 : 元素选择器 : 通配符 :
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>css基础选择器</title>
<style>
/*清除浏览器的默认样式*/
*{
padding: 0;
margin: 0;
}
/*id选择器*/
#box1{
background: hotpink;
color : #fff;
}
/*类选择器*/
.cla1{
font-size: 30px;
}
.cla2{
font-style: italic; /*斜体*/
}
/*元素选择器*/
div{
width: 200px;
height: 200px;
background: paleturquoise;
}
/*通配符*/
*{
border:1px solid black;
}
</style>
</head>
<body>
<!--
在 CSS 中，选择器是一种模式，用于选择需要添加样式的元素。
选择器:
基础选择器
组合选择器
伪类选择器
微元素选择器
基础选择器 :
id选择器 : # id属性唯一的,不可重复
根据元素的id属性选择1个元素
类选择器 : . class属性值可以重复的,可以在值列表中添加多个属性值
根据与元素的class属性值选择1个或者1组元素
元素选择器 : 标签名
根据元素 标签名选中一个 或者一组元素
通配符 : *
优先级 : id>类>元素>通配符
-->
<div id="box1" class="cla2">div1</div>
<div id="box2" class="cla1 cla2">div2</div>
<div id="box3" class="cla1">div3</div>
</body>
</html>
组合选择器: 子元素选择器: 相邻兄弟选择器: 普通兄弟选择器:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>css组合选择器</title>
<style>
/*后代选择器*/
/*.li1 ul{
border: 1px solid red;
}*/
/*子元素选择器*/
body > ul{
border : 1px dotted green;
}
/*相邻兄弟选择器*/
.banana+li{
font-style: italic;
color: blue;
}
/*普通兄弟选择器*/
.banana~li{
background: orchid;
}
</style>
</head>
<body>
<!--
注意: css中样式存在继承
字体样式,颜色样式,背景样式等等都会默认继承
边框,内外边距等样式不会继承
组合选择器:
后代选择器
父级选择器 子级选择器
选中所有的子元素包括孙子元素
子元素选择器
用于选择指定标签元素的所有第一代子元素，以大于号分隔
相邻兄弟选择器
可选择紧接在另一元素后的元素，且二者有相同父元素。以加号分隔
普通兄弟选择器
选择紧接在另一个元素后的所有元素，而且二者有相同的父元素，以波浪线分隔
-->
<h1>食物</h1>
<ul class="food">
<li class="li1">水果
<ul>
<li class="banana">香蕉</li>
<li>苹果</li>
<li>梨</li>
</ul>
</li>
<li class="li2">蔬菜
<ul>
<li>白菜</li>
<li>油菜</li>
<li>卷心菜</li>
</ul>
</li>
</ul>
</body>
</html>
群组选择器：伪类选择器:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>css组合选择器</title>
<style>
ul,.box2{
background: orchid;
}
a:link{
color: orchid;
}
a:visited{
color: paleturquoise;
}
a:hover{
text-decoration: none; /*去除下划线*/
text-decoration: underline; /*添加下划线*/
text-decoration: overline; /*添加上划线*/
text-decoration: line-through; /*添加中划线*/
}
.box{
width: 200px;
height: 200px;
background: red;
/*圆形*/
border-radius: 100px;
}
.box:hover{
background: yellow;
}
.box:active{
background: green;
}
li:first-child{
border: 1px solid darkred;
}
li:last-child{
background: darkblue;
}
li:nth-child(2){
background: red;
}
</style>
</head>
<body>
<!--
群组选择器
选择器1,选择器2..{
样式;
}
伪类选择器 :
a:link a标签未访问
a:visited a标签已访问
:hover 当鼠标悬停在元素上时候,作用的样式
:active 当鼠标按下时候显,作用的样式
:first-child 当元素作为父级的第一个子元素时候被选中
:last-child 当元素作为父级的最后一个元素时候被选中
:nth-child(num) 当元素作为父级的第n个子元素的时候选择
-->
<h1>食物</h1>
<ul class="box1">
<li>香蕉</li>
<li>苹果</li>
<li>梨</li>
</ul>
<ol class="box2">
<li>白菜</li>
<li>油菜</li>
<li>卷心菜</li>
</ol>
<a href="#">我是a标签</a>
<div class="box">box</div>
</body>
</html>
组合选择器:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>css组合选择器</title>
<style>
.box{
width: 1000px;
height: 1500px;
background-color: pink ; /*背景颜色*/
background-image: url("img/img1.jpg"); /*背景图片*/
background-repeat: no-repeat ; /*不平铺*/
/*background-repeat: repeat-x ;*/
background-size: 200px;
background-position: center bottom; /*背景图片位置*/
background-position: 200px bottom;
/*复合属性 : 同时设置多个背景相关的样式 顺序,个数可以任意改变*/
background: orchid url("img/boy.jpg") no-repeat center;
text-align: center;
}
p{
background: yellow;
/*首行缩进*/
text-indent:200px;
text-indent:2em; /*2个字体大小的宽度*/
font-size: 40px;
/*文本字体*/
font-family : "楷体";
/*加粗*/
font-weight: 100;
}
#div{
height: 50px;
background: cyan;
color: white;
text-align: center;. line-height: 50px; /*垂直居中*/
font-size: 32px;
font-family: "楷体";
}
</style>
</head>
<body>
<!--
背景样式
文本样式:
text-align: center;
块元素|行内块元素中内容在元素中的水平对齐方式
text-indent
-->
<div id="div">
从前有做山,山里有个小和尚,小和尚给老和尚讲故事!!!
</div>
<div class="box">box</div>
<p>公安机关在疫情防控中采取了哪些措施？8月3日下午，江苏省举行新冠肺炎疫情防控新闻发布会。江苏省公安厅党委副书记、常务副厅长尚建荣介绍相关情况。
尚建荣介绍了公安采取的几个措施：一是为强化封控区域管理。全省及时对中高风险地区居民小区、村组采取严格封控措施。广大公安民警会同街道乡镇干部、卫生防疫工作者、社区网格员、志愿者组成专班，24小时值守管理，严格限制人员流动，精准细致筛查防控。对发生感染病例的小区和楼栋单元，坚决落实集中隔离措施。对其他居民群众，通过张贴告示、喊话宣传等方式，引导居民做好自身健康第一责任人，严格规范落实居家隔离措施，配合开展健康监测，热情为封控社区居民群众提供生活服务和后勤保障，会同有关部门努力解决老弱病残孕等特殊关爱群体就医看病等方面存在的困难，这方面的联络通道逐步在顺畅。</p>
</body>
</html>
标签: 行内元素 块元素 display :
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>display属性</title>
<style>
/*去除浏览器的默认样式*/
*{
padding: 0;
margin: 0;
}
#box{
background: salmon;
width: 100px;
height: 100px;
/*display: none;*/ /*元素消失*/
display:inline;
display:inline-block;
}
ul{
list-style: none; /*去除列表项标记*/
}
ul li{
background: cyan;
/*让块元素同行展示*/
display: inline-block;
width: 25%;
height: 50px;
font-size: 30px;
color: white;
text-align: center;
line-height: 50px;
}
ul li:hover{
background: pink;
color: orchid;
border-bottom: 2px solid hotpink;
}
</style>
</head>
<body>
<!--
标签:
行内元素
宽度有内容撑起
可以与其他元素同行展示
不能设置宽高
可以包含行内,普通文本
不能设置上下内外边距
块元素
独占一行
可以设置宽高
可以包含行内,块,文本
可以设置元素的内外边距
display :
none 元素消失
block 块元素
inline 行内元素
inline-block 行内块
行内元素与块元素的特点都存在
-->
<div id="box">div</div>
这是div后面
<ul>
<li>我的说说</li><li>我的相册</li><li>我的音乐</li><li>我的XX</li>
</ul>
</body>
</html>
总结：
html 超文本标记语言
学习各种各样标签的使用
作用,特点,属性,属性值
常用标签
p
div
a
img
span
h*
ul
ol
lo
table
form 表单 ****
收集用户输入的数据
form标签的属性
表单元素
input
select
<button>提交</button>
默认提交
type : submit默认 button按钮 reset重置
css 层叠样式表
为选中的html元素添加样式
使用方式:
行内样式表
内部样式表
外部样式表
选择器 :
基础选择器
组合选择器
群组选择器
伪类选择器
伪元素选择器
基础常用样式:
背景样式
文本样式
字体样式
定位
display
浮动
盒子模型
356
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
