CSS基础
这是我参与8月更文挑战的第30天，活动详情查看：8月更文挑战
感激相遇 你好 我是y大壮
作者：y大壮
链接：juejin.cn/user/756923… 来源：掘金
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。
🌊🌈关于前言：
文章部分内容及图片出自网络，如有问题请与我本人联系
第一章 css基础语法
每个css样式由两部分组成，即选择符和声明，声明又分为属性和属性值。 属性必须放在花括号中，属性与属性值用冒号连接。每条声明用分号结束。属性值与属性值不分先后顺序。
选择符{属性：属性值;}
div{width:500px; height:500px;}
样式的建立： 1.内部样式(最好写在中)
内部样式表(嵌套到页面中)
语法：
<style type="text/css">
css语句
</style>
background:背景色
<style type="text/css" >
div{width:500px;height:500px; background:#096}
</style>
<body>
<div></div>
</body>
2.外部样式
a).外部样式表的创建
b).外部样式表的导入
1.先创建css文件
2.<link rel="stylesheet" type="text/css" href="css/demo-3.css" />
3.设置css文件的样式
3.内联样式
内联样式(表行间样式，行内校长，嵌入式样式)
语法：<标签 style="属性：属性值; 属性:属性值; "></标签>
<div style="width:100px;"></div>
优先级： 内联样式--->(内部，外部)
第二章 css选择符(选择器)
选择符的定义：选择符表示要定义样式的对象，可以是元素本身，也可以是一类元素或者制定名称的元素。
常用的选择符有十种左右类型选择符，id选择符，class选择符，通配符，群组选择符，包含选择符，伪类选择符，伪对象选择符。
1.元素选择符/类型选择符/标签选择符(element选择器)
语法：元素名称{属性：属性值;}
类型选择符是根据html语言中的标记来直接定义
例：
<head>
<style type="text/css">
div{ width:90px; height:90px; color:#000; background:#CF6;}
p{ color:#0C0;} //让全部P标签都变颜色
</style>
</head>
<body>
<div></div>
<p>我是一个p标签！！！</p>
<p>我是一个pp标签！！！</p>
</body>
2.id选择器
语法：#id名{属性：属性值;}
说明：
1.使用id选择符时，要为每个元素定义一个id属性<div id="top"></div>
2.id选择符的语法格式是 #top{width:300px;height:300px;}
3.一个id名称只对应一个具体元素对象
例 ：
<herd>
#top{ color:#906;font-size:36px;} //font-size:36px;放大
</herd>
<body>
<p id="top">我是一个p标签！！！</p>
</body>
3.class 选择器
语法： .class名{属性：属性值;}
说明：
1.当我们使用类选择符时，应先为元素定义一个名称。
2.类选择符语法格式是<div class="top"></div>
用法：class选择符更适合定义一类样式
例：
<herd>
.top{ color:#906;font-size:36px;} //可以放在一个或者多个
</herd>
<body>
<div class="top"></div>
<p class="top">我是一个p标签！！！</p>
</body>
4.群组选择器
语法：选择符1，选择符2，......{属性：属性值;}
说明：当有多个选择符应用相同的样式时，可以将选择符用" , " 分隔的方式，合并为一组。
.top,#nav,p{width:11px;}
例：
<herd>
.top1{ color:#906;font-size:36px;}
#top{ color:#906;font-size:36px;}
p{ color:#0C0;}
p,.top1,#top{ font-size:60px;} //群组标签可以让多个标签一起共享属性
</herd>
<body>
<p>ccsfefs</p>
<div class="top1"></div>
<p id="top">我是一个p标签！！！</p>
</body>
5.包含选择器
语法:选择符1(父) 选择符2(子) {属性：属性值;}
说明：选择符1和选择符2 用空格隔开，含义就是选择符1包含的所有选择符2.
div ul li{height:200px;}
例：
<herd>
ul li{ color:#C0C;}
</herd>
<body>
<ul>
<li>我是包含选择器</li>
</ul>
</body>
6.通配符选择器
语法：*{属性：属性值;}
说明：通配选择符的写法是" * "，其含义就是所有元素标签。
用法：常用来重置样式。
*{ margin:0;padding:0;} 外边距
例：
*{ color:#060; margin:0; padding:0;} //所有的标签
7.伪类选择器
a:link{color:red} //未访问的链接状态
a:visited{color:green;} //已访问的链接状态
a:hover{color:blue;} //鼠标滑过链接状态
a:active{color:yellow;} //鼠标按下去时的状态
说明：
1.当这4个超链接伪类选择符联合使用时，应注意他们的顺序，正常顺序为：a,a:link,a:visited,a:hover,a:active,错误的顺序会使超链接的样式失效。
2.为了简化代码，把伪类选择符中相同的声明提出来放在a选择符中 a{color:red;} a:hover{color:green;}:表示其他有一种状态都相同，只有鼠标划过变化颜色。
例：
a: link{ color:red;}
a: visited{ color:yellow;}
a: hover{ color:blue;}
a: active{ color:#0F0;}
或者 a{ color:red;}
a:hover{ color:yellow}
<a href="https://www.baidu.com" title="你点啊"> 请你点击我 </a>
选择符的权重
内联样式选择符 > id选择符 > class选择符 = 属性选择符 = 伪类选择符 = 伪元素选择符 > 类型选择符 > 子选择符 > 继承选择符
包含选择符：为包含选择符之和。
如果权重相同时，则执行后写的样式。因为后写的样式覆盖了前面的
css的注释： /* */
第三章 css核心属性和浮动
css属性组成和作用
属性：属性值
1.每个css样式都必须由两部分组成：选择符(Selector)和声明(Decleration)声明又包括属性(Properyt)和属性值(Value)
2.css属性：属性是指定选择符具有的属性，他是css的核心，css2共有15多个属性
3.css属性值：属性仁包括法定属性值和常规的数值加单位,div{width:400px;}
一. 文本文字属性
1.文本大小 ：{font-size:12px/14px/16px}
说明：
属性值为数值型时，必须加单位，为0时除外。默认为16px;
2.字体的类型
{ font-family:字体1，字体2}
当字体是英文字体的时候加"宋体"
3.文本颜色 ：{color:颜色值;} {background:250，0，0，1} 第4个值是背景色的深浅度
二. 列表属性
1. 定义列表符号样式：{list-style-type;}
说明：取值：disc(实心圆) circle(空心圆) square(实心方块) none(去掉列表符号);
例：
<head>
<style type="text/css">
ul li{list-style-type: square }
</style>
</head>
<body>
<ul>
<li font->111</li>
<li>222</li>
<li>333</li>
</ul>
</body>
2.使用图片作为列表符号： {list-style-image:url(图像路径);}
说明：url（所使用图片的路径及全称）
例：
ul li{list-style-image: url(images/005EpFX5gy1g5h4jw2l7yj30tz1f7ao8.jpg); }
3.定义列表符号的位置： {list-style-position:;}
说明：取值： outside(外边) inside(里边)
例：
ul li{list-style-position:outside;}
4.取消列表符号 ： {list-style-none}
例：
ul li{list-style-type:none;}
三.css边框属性
语法:{border: ;}
说明：
属性1：边框样式border-style:solid/dashed/dotted/double solid:实线 ，dashed:虚线 ，dotted:点状线 double:双线， none/0：去掉边框
属性2：边框厚度 border-width:取值;
属性3：边框颜色 border-color: 取值;
例：
<head>
<style type="text/css">
div{ width:300px; height:300px; background:#09F;
border:2px dotted red; //第一个是线的宽度，第二个是边框的样式 ，第三个是边框的颜色
} // border: width style color;
</style>
</head>
<body>
<div> 我在那里 </div>
</body>
1.单独设置某个方向的边框属性：
border-top:上边框
border-bottom:下边框
border-left:左边框
border-right:右边框
例：
border-top :2px dotted red; //这个是简写
border-top-style: dotted;
border-top-width: 2px;
border-top-color: red;
四. 背景图属性
背景颜色
语法：选择符{background-color:颜色值} 简写： background:color值;
1.背景图片的设置
语法:background-image:url（背景图片的路径及全称）;
说明：
网页上有两种图片形式：插入图片，背景图;插入图片：属于网页内容，也就是结构。 背景图：属于网页的表现，背景图上可以显示文字，插入图片，表格等。
背景图片的显示原则：
容器等于图片，正好
容器大于图片尺寸，平铺
容器小于图片尺寸，只显示元素范围以内的图
加载背景图必须有容器区域。
2.背景图片平铺属性
语法：选择符{background-repeat:no-reat/repeat/repeat-x/repeat-y}
no-repeat:不平铺
repeat:平铺（默认）
repeat-x:横向平铺
repeat-y:纵向平铺
例：
<style type="text/css">
div{width:900px; height:900px; border: 3px dotted red;
background-image:url(images/005EpFX5gy1g5h4k317zrj30u01br48t.jpg);
background-repeat:repeat;
}
</style>
3.背景图片的位置
语法：选择符{background-position:水平方向属性值 垂直方向}
水平方向值：left/center/right或数值
垂直方向值：top/center/botton或数值10
说明：
水平向右 垂直向下移动 是正数值
水平向左 垂直向上 是负数值
例：
background-position:left top; 向左向上
background-position:right botton; 向右向下
4.背景图片固定
语法：选择符{background-attachment:scrooll(滚动)/fixed(固定)}
说明：fixed 固定，不随内容一块滚动; scroll:随内容一块滚动。
例：
<style type="text/css">
body{background-image:url(images/005EpFX5gy1g5h4juu6dtj30u0190gtf.jpg);
background-repeat:no-repeat;
background-position:top right;
background-attachment: scroll;
}
div{ height:9000px; }
</style>
5.css浮动属性
float:定义网页中其它文本如何环绕该元素显示
有三个取值：
left:元素活动浮动在文本左面
right:元素浮动在右面。
none:默认值，不浮动。
浮动产生负作用
浮动产生负作用
1.背景不能显示 （overflow:hidden;）
由于浮动产生，如果对父级设置了(css background背景)CSS背景颜色或CSS背景图片，而父级不能被撑开，所以导致CSS背景不能显示。
2.边框不能撑开
如果父级设置了CSS边框属性（css border）,由于子级里使用了float属性，产生浮动，父级不能被撑开，导致边框不能随内容而被撑开。
3.margin padding设置值不能正确显示
由于浮动导致父级子级之间设置了css padding, cssmargin 属性的值不能正确表达，特别是上下边的padding和margin不能正确显示。
例：
<head>
<style type="text/css">
*{ margin:0; padding:0;} //取消设置 如 li 留下的那个实点
ul{ width:900px; border:3px dotted red; list-style:none; overflow: hidden;}//overflow:hidden :让行高自适应
.left{ width:300px; height:300px; background:#FF0; float:left;} //float:left设置浮动全部向左排
.chent{ width:300px; height:300px; background:#000; float:left}
.right{ width:300px; height:300px; background:red; float:left}
</style>
</head>
<body>
<ul>
<li class="left"></li>
<li class="chent"></li>
<li class="right"></li>
</ul>
</body>
清除浮动
浮动的框可以向左向右移动，直到它的外边缘碰到包含框或另一个浮动框的边框为止。浮动框是脱离子普通的文档流。
清除浮动的方法
1.父级添加overflow:hidden:缺点：父级这个盒子不能放其他元素
2.clear:both清除浮动
3.万能清除浮动
五 CSS盒模型
盒模型的概念：盒模型是CSS布局的基石，它规定了网页元素如何显示以及元素间相互关系，CSS定义所有的元素都可以拥有像盒子一样的外形 和平面空间，即都包含内容区，补白(填充)，边框，边界(外边距)这就是盒模型。
*{margin:0; padding:0;}:消除内外边距
1.padding：内边距
padding是设定页面中一个元素内容到元素的边框之间的距离，也称补白.padding没有负值。
用法：
一个值：四个方向padding:2px: // padding-top:20px;上 botton：下 lefe:左 right:右
二个值：上下 左右{padding:10px 20px;}
三个值： 上 左右 下{padding:10px 20px 30pox;}
四个值： 上右下左{padding:10px;20px;30px;40px}
2.margin : 外边距
边界：margin，在元素外边的空白区域，称为边距。
和padding一样
margin:auto; 自适应 左右边距相等
例：
<head>
<style type="text/css">
*{ margin:0; padding::0;}
div{width:300px; height:300px; border:3px solid red; background-image:url(images/005EpFX5gy1g5h4jw2l7yj30tz1f7ao8.jpg);
padding:20px 60px 90px 160px;
margin:auto ;
}
</style>
</head>
<body>
<div> 对我就是那个盒子</div>
</body>
3.文本属性-容器溢出{ overflow:} 处理溢出的数据
{overflow:visible/hidden/scroll/zuto/inherit;}
visible:转变值，内容不会被修剪，会呈现在元素框之外。
hidden：内容会被修剪，并且其余内容是不可见的：
scroll：内容会被修剪，但是浏览器会显示流动条，以便查看其余的内容
auto:如果内容被修剪，则浏览器会显示流动条， 以便查看其他的内容
inherit:规定应该从父元素继承overflow属性的值。
例：
<style type="text/css">
div{ width:300px; height:300px; border: 3px solid red;
overflow:auto;
}
</style> <div>fffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffff城在圾圾的遥肝膨胀圾苛肝散去散去散去散去ffffffffffffffffd fd df ffffffffffffffffffffffffe
rerrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrr霰肝散去腻肛菜
teeeeeeee
</div>
4.文本属性-空白空间（处理文字的换行和空白符） white-space:
{ white-space:normal/pre/nowrap/pre-wrap/pre-lin/inherit;}
normal:默认值，多余空白会被浏览器忽略只保留一个
pre:空白会被浏览器保留
pre-wrap:保留一部分空白符序列，但是正常的进行换行
pre-line:合并空白符序列，但是保留换行符
nowrap：文本不会换行，文本会在同一行上继续，直到遇到<br/>标签为止。
5.文本属性-文本溢出 text-overflow （处理溢出的文本显示省略标记）
取值：
clip:不显示省略号(...),而是简单的裁切
ellipsis:当对象内文本溢出时，显示省略标记
6.文本属性-省略号设置
text-overflow仅是：当文本溢出时是否显示省略标记，并不具务其它的样式定义，要实现溢出时产生省略号的效果还需要定义：
1.容器宽度：width:value;( px,%,都可以)
2.强制文本在一行内显示shite-space:nowrap;
3.溢出内容为隐藏：overflow:hidden;
4.溢出文本显示省略号：text-overflow:ellipsis;
必须是单行文本才能设置文本溢出！！
例：
<style type="text/css">
div{ width:300px; height:300px; border: 3px solid red; //1.要容器的宽度
white-space: nowrap; //2.把它们显示在一行
overflow: hidden; //3.溢出内容设置为隐藏
text-overflow: ellipsis; //4.溢出时显示省略号
}
</style>
<div>ffffffffff ff fffffff ffffffffffffffffff ffffffffff ffff fffffffffffffffffffff fffffffffffffffff ffffff ffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffff城在圾圾的遥肝膨胀圾苛肝散去散去散去散去ffffffffffffffffd fd df ffffffffffffffffffffffffe
rerrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrr霰肝散去腻肛菜
teeeeeeee
</div>
