CSS学习
<p></p><div class="toc"><div class="toc-container-header">目录</div><ul><li>什么是CSS<ul><li>快速入门</li><li>css优势</li></ul></li><li>CSS导入方式</li><li>选择器<ul><li>基本选择器<ul><li>标签选择器</li><li>类选择器</li><li>ID选择器</li></ul></li><li>层次选择器<ul><li>后代选择器</li><li>子选择器</li><li>相邻兄弟选择器</li><li>通用选择器</li></ul></li><li>结构伪类选择器</li><li>属性选择器（常用）</li></ul></li><li>CSS的作用及字体样式<ul><li>字体样式</li><li>文本样式</li><li>文本阴影和超链接伪类</li><li>列表样式练习</li></ul></li><li>背景图像应用与渐变</li><li>盒子模型及边框使用<ul><li>边框</li><li>外边距</li><li>内边距</li></ul></li><li>圆角边框及阴影<ul><li>圆角边框</li><li>阴影</li></ul></li><li>display和浮动</li><li>overflow及父级边框塌陷问题</li><li>定位<ul><li>相对定位</li><li>绝对定位</li><li>固定定位</li></ul></li><li>z-index</li><li>动画及视野扩展</li></ul></div><p></p><h1 id="什么是css">什么是CSS</h1>
<p>如何学习</p>
<ul>
<li>CSS是什么</li>
<li>CSS怎么用（快速入门）</li>
<li>CSS选择器（重点加难点）</li>
<li>美化网页（文字，阴影，超链接，列表，渐变）</li>
<li>盒子模型</li>
<li>浮动</li>
<li>定位</li>
<li>网页动画（特效效果）</li>
</ul>
<p>Cascading Style Sheet 层叠级联样式表</p>
<p>CSS：表现（美化网页）</p>
<p>字体，颜色，边距，高度，宽度，背景图片，网页定位，网页浮动</p>
<h2 id="快速入门">快速入门</h2>
<p><strong>基本使用</strong></p>
<pre><code><!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!--规范，<style>可以编写css的代码，每一个声明最好使用分号结尾
语法：
选择器{
声明1：
声明2：
声明3：
}
-->
<style>
h1{
color:red;
}
</style>
</head>
<body>
<h1>我是标题</h1>
</body>
</html>
</code></pre>
<h2 id="css优势">css优势</h2>
<ul>
<li>内容和表现分离</li>
<li>网页结构表现统一，可以实现复用</li>
<li>样式十分的丰富</li>
<li>建议使用独立于html的css文件</li>
<li>利用SEO，容易被搜索引擎收录</li>
</ul>
<h1 id="css导入方式">CSS导入方式</h1>
<pre><code><!--行内样式，在标签元素中，编写一个style属性，编写样式即可-->
<h1 style="color:red">我是标题</h1>
</code></pre>
<pre><code><!--内部样式-->
<style>
h1{
color:green;
}
</style>
</code></pre>
<pre><code><!--外部样式-->
h1{
color:yellow;
}
</code></pre>
<p>优先级：就近原则</p>
<p>扩展：外部样式两种写法</p>
<ul>
<li>
<p>链接式</p>
<pre><code><link rel="stylesheet" href="./css/style.css">
</code></pre>
</li>
<li>
<p>导入式</p>
<pre><code><style>
@import url(./css/style.css)
</style>
</code></pre>
</li>
</ul>
<h1 id="选择器">选择器</h1>
<h2 id="基本选择器">基本选择器</h2>
<h3 id="标签选择器">标签选择器</h3>
<pre><code><style>
/*标签选择器，会选择到页面上所有的这个标签的元素*/
h1{
color: red;
}
</style>
</code></pre>
<h3 id="类选择器">类选择器</h3>
<pre><code> <style>
/*类选择器 .class名称
好处，可以多个标签归类，是同一个class，可以复用*/
.xu{
color: green;
}
</style>
<h1 class="xu">我是标题</h1>
</code></pre>
<h3 id="id选择器">ID选择器</h3>
<pre><code> <!--内部样式-->
<style>
/*id选择器id保证全局唯一
#id */
#xu{
color: green;
}
</style>
<h1 id="xu">我是标题</h1>
</code></pre>
<p>优先级：ID选择器>class选择器>标签选择器</p>
<h2 id="层次选择器">层次选择器</h2>
<h3 id="后代选择器">后代选择器</h3>
<p>在某个元素的后面，子子孙孙</p>
<pre><code><style>
body p{
background:green;
}
</style>
</code></pre>
<h3 id="子选择器">子选择器</h3>
<p>只有一代，第一代才有</p>
<pre><code><style>
body>p{
background:green;
}
</style>
</code></pre>
<h3 id="相邻兄弟选择器">相邻兄弟选择器</h3>
<p>向下相邻，只有一个</p>
<pre><code><style>
.nab + p{
background:green;
}
</style>
<p>p1</p>
<p class="nab">p2</p>
<p>p3</p>
</code></pre>
<h3 id="通用选择器">通用选择器</h3>
<p>向下所有兄弟元素</p>
<pre><code><style>
.nab~p{
background:green;
}
</style>
</code></pre>
<h2 id="结构伪类选择器">结构伪类选择器</h2>
<pre><code><style> #ul的第一个元素
ul li:first-child{
background:green;
}
</style>
<style> #ul的最后一个元素
ul li:last-child{
background:green;
}
</style>
<style> #选择当前p元素的父级元素，选中父级元素的第一（可改）个元素，并且是当前元素才生效
p:nth-child(1){
background:green;
}
</style>
<style> #选择当前p元素的父级元素的p元素的第二个
p:nth-of-type(1){
background:green;
}
</style>
</code></pre>
<h2 id="属性选择器常用">属性选择器（常用）</h2>
<pre><code><style>
.demo a{
float:left;
display:block;
height:50px;
width:50px;
border-radius:10px;
background:#2700ff;
text-align:center;
color:gainsboro;
text-decoration:none;
margin-right:5px;
font:bold 20px/50px Arial;
}
/*存在id属性
属性名，属性名=属性值（正则）
=绝对等于
*=包含
^=以这个开头
$=以这个结尾
*/
a{
background:yellow;
}
a{
background:green;
}
a{
background:black;
}
</code></pre>
<h1 id="css的作用及字体样式">CSS的作用及字体样式</h1>
<p><mark>span</mark>标签：重点要突出的字，使用span套起来</p>
<pre><code><style>
#n{
font-size:50px
}
</style>
欢迎学习<span id="n">Java</span>
</code></pre>
<h2 id="字体样式">字体样式</h2>
<ul>
<li>font-family:字体</li>
<li>font-size:字体大小</li>
<li>font-weight:字体粗细</li>
<li>color:字体颜色</li>
<li>...</li>
</ul>
<h2 id="文本样式">文本样式</h2>
<ul>
<li>
<p>颜色</p>
<ul>
<li>rgbcolor:rgb(0,0,0)</li>
<li>rgba 增加了透明度color:rgba(0,255,255,0.5)</li>
</ul>
</li>
<li>
<p>文本对齐的方式</p>
<ul>
<li>text-align:center</li>
<li>text-align:left</li>
<li>text-align:right</li>
</ul>
</li>
<li>
<p>首行缩进</p>
<ul>
<li>text-indent:2em</li>
</ul>
</li>
<li>
<p>行高</p>
<ul>
<li>height:300px</li>
<li>line-height:300px 行高和块的高度一致就可以上下居中</li>
</ul>
</li>
<li>
<p>装饰</p>
<ul>
<li>text-decoration:underline下划线</li>
<li>text-decoration:line-through 中划线</li>
<li>text-decoration:overline 上划线</li>
<li>text-decoration:none a标签（超链接）默认下划线，可以设置为none去掉</li>
</ul>
</li>
<li>
<p>文字图片水平对齐：a,b</p>
</li>
</ul>
<h2 id="文本阴影和超链接伪类">文本阴影和超链接伪类</h2>
<p>伪类</p>
<ul>
<li>a:hover{color:red} 鼠标悬停状态</li>
<li>a:active{color:red} 鼠标按住未释放的状态</li>
<li>a:link未访问的链接</li>
<li>a:visited已访问的链接</li>
</ul>
<p>阴影</p>
<ul>
<li>text-shadow: green 10px 10px 10px 阴影颜色 水平偏移 垂直偏移阴影半径</li>
</ul>
<h2 id="列表样式练习">列表样式练习</h2>
<pre><code>ul li{
height:30px;
list-style:none;//去掉圆点
}
</code></pre>
<p>none:去掉圆点</p>
<p>circle:空心圆</p>
<p>decimal:数字</p>
<p>square：正方形</p>
<pre><code><div id="nav">
</div>
<style>
#nav{
weight:50px;
height:80px;
}
</style>
嵌套在div标签里，设置大小
</code></pre>
<h1 id="背景图像应用与渐变">背景图像应用与渐变</h1>
<p>背景颜色</p>
<p>背景图片</p>
<pre><code><style>
div{
width:1000px;
height:600px;
border:1px solid red;
background-image:url("images/tx.jpg")//默认是全部平铺的
background-repeat:repeat-x;水平平铺
background-repeat:repeat-y;竖直平铺
background-repeat:no-repeat;不平铺
background-position:240px 39px;
}
</style>
//合在一起写 颜色 图片 位置 平铺方式
background:red url("") 270px 10px no-repeat;
</code></pre>
<p>渐变径向渐变圆形渐变</p>
<pre><code>background-color: #4158D0;
background-image: linear-gradient(30deg, #4158D0 0%, #C850C0 46%, #FFCC70 100%);
</code></pre>
<h1 id="盒子模型及边框使用">盒子模型及边框使用</h1>
<p>margin：外边距</p>
<p>padding：内边距</p>
<p>border：边框</p>
<h2 id="边框">边框</h2>
<ul>
<li>边框的粗细</li>
<li>边框的样式</li>
<li>边框的颜色</li>
</ul>
<pre><code>/*border 粗细样式颜色*/
body{
/*总有一个默认的外边距*/
margin:0;
padding:0;
text-decoration:none;
}
#box{
width:300px;
border:1px solid red;
}
h2{
font-size:16px;
background-color:green;
line-height:30px;
}
form{
background:#3cdba6;
}
div:nth-of-type(1) input{
border:3px solid black;
}
div:nth-of-type(2) input{
border:3px dashed yellow;
}
</code></pre>
<h2 id="外边距">外边距</h2>
<pre><code>/*外边距的妙用居中必须是块元素，有固定的宽度*/
/*
margin:0上下左右
margin:0 1px上下左右
margin:0 1px 2px 3px左上 右上 右下 左下 顺时针
*/
</code></pre>
<h2 id="内边距">内边距</h2>
<pre><code>padding:
与外边距用法一样
</code></pre>
<p>盒子计算：</p>
<p>margin+border+padding+内容宽度</p>
<h1 id="圆角边框及阴影">圆角边框及阴影</h1>
<h2 id="圆角边框">圆角边框</h2>
<pre><code>border-radius:50px 50px 20px60px; 顺时针
div{
width:100px;
height:100px;
border:10px solid red;
border-radius:50px 50px 20px60px; /*左上右下*/
}
</code></pre>
<h2 id="阴影">阴影</h2>
<pre><code>div{
width:100px;
height:100px;
border:10px solid red;
box-shadow:10px 10px 1px yellow;/* 长 宽 模糊半径颜色*/
}
</code></pre>
<h1 id="display和浮动">display和浮动</h1>
<p>标准文档流</p>
<p>块级元素：独占一行</p>
<p>行内元素：不独占一行，可以被包含在块级元素中</p>
<pre><code>/*
block块内元素
inline 行内元素
inline-block 是快元素但是可以内联，在一行
none 不显示
float:left;左右浮动
right
*/
div{
width:100px;
height:100px;
border:1px solid red;
}
span{
width:100px;
height:100px;
border:1px solid red;
display:block;
float:left;
clear:both;//
}
</code></pre>
<h1 id="overflow及父级边框塌陷问题">overflow及父级边框塌陷问题</h1>
<p>clear:</p>
<ul>
<li>right右侧不允许有浮动元素</li>
<li>left 左侧不允许有浮动元素</li>
<li>both 两侧都不允许有浮动</li>
<li>none</li>
</ul>
<p>父级边框塌陷问题</p>
<p>解决方案</p>
<ul>
<li>增加父级元素高度</li>
<li>浮动元素增加一个空的div标签，清除浮动</li>
<li>overflow</li>
</ul>
<pre><code>overflow:hidden;多余的隐藏
overflow:scroll;滚动条
</code></pre>
<ul>
<li>父类添加一个伪类</li>
</ul>
<pre><code>#father:after{
content:'';
display:bock;
clear:both;
}
</code></pre>
<h1 id="定位">定位</h1>
<h2 id="相对定位">相对定位</h2>
<p>相对于原来的位置偏移，相对定位的话，仍然在标准文档流中，原来的位置会被保留</p>
<pre><code>#first{
background-color:red;
border:1px dashed #666;
position:relative;/*相对定位*/
top:-20px;/*上移距离上*/
left:20px; /*右移距离左边*/
}
</code></pre>
<h2 id="绝对定位">绝对定位</h2>
<pre><code>position:absolute
</code></pre>
<ul>
<li>
<p>没有父级元素定位的前提下，相对于浏览器定位</p>
</li>
<li>
<p>假设父级元素存在定位，父级元素position：relative，我们通常会相对于父级元素进行偏移</p>
</li>
<li>
<p>在父级元素范围内移动，绝对定位后，位置不保留</p>
</li>
</ul>
<h2 id="固定定位">固定定位</h2>
<pre><code>position:fixed
</code></pre>
<h1 id="z-index">z-index</h1>
<pre><code>z-index:100
opacity:0.5 透明度
</code></pre>
<p>z-index:默认是0，最高无限 999</p>
<h1 id="动画及视野扩展">动画及视野扩展</h1>
<p>HTML5 canvas</p>
<p>CSS动画</p>
<p>javascript动画</p><br><br>
来源：https://www.cnblogs.com/uxquan/p/13758972.html
頁:
[1]