这篇文章主要介绍了关于css样式的处理 ，有着一定的参考价值，现在分享给大家，有需要的朋友可以参考一下
4/23/2018 8:23:35 AM
CSS
晨测：
1. 标准的一个html文件的结构
2. 指定颜色和资源位置的方式
3. 常用标签
设置各级标题：
设置段落：
设置文本格式：
超链接：
图片标签：
表格的基本形式：
表单标签：
框架标签：回顾
今日概要
一、CSS概述 二、CSS的选择器（认识） 三、CSS样式和属性（练习） 四、重构商城首页p+CSS(页面布局)（重点） 浮动/更改显示方式
一、CSS概述
概念
p,就是一个HTML元素，块级元素，通常结合CSS进行页面的布局。 CSS,层叠样式表，给HTML元素增强显示。
作用
样式定义如何显示HTML元素，页面的布局（美化HTML效果）
使用方式
内联样式方式：在当前的元素属性中直接设置style属性，适用性差，只能作用于当前元素。
style属性是HTML元素通用的属性
内部样式方式：在head标签中，使用<style>标签来设置样式，适用性强，可以同时作用于一个页面的多个元素。
外部样式方式：创建.css样式文件，在此文件中设置元素的样式，在需要使用的页面中使用<link>元素引入。适用性最强，
可以通过作用于多个页面。语法
选择器｛
样式申明
｝
1. 查找需要设置样式的元素 ，选择器可以用来查找元素
2. 设置样式 ，属性名称：属性值 ；属性名称：属性值 ；
3. 例如：
h1{
color:#ff0000;
font-size:25px;
...:...;
}
注意：样式申明中，如果不是最后一个属性值，后面的分号不可以省略。特点
继承性：子元素可以继承父元素的样式 层叠性：同一个元素可以使用多个样式，如果不冲突，效果叠加 优先级：默认的样式 ---外部样式 --- 内部样式--- 内联样式 （由低到高，就近原则）
二、选择器
元素选择器
语法格式：元素名称{
样式申明；
}
特点：适用于相同元素的样式设置类选择器
语法格式： .类属性值{ class属性：属性值
样式申明；
}
特点：适用于不相同元素的样式设置
例如：通过类选择器查找h1元素
<h1 class="h1class"></h1>
.h1class{
}id选择器
语法格式： #id属性值{
样式申明；
}
特点：使用于一个具体的元素的样式设置
例如：通过id选择器查找一个具体的h1标签
<h1 id="idvalue"></h1>
#idvalue{
}选择器组
语法格式：选择器1，选择器2，...{
样式申明；
}
特点：可以在多个不同的选择器中重用样式
例如：
#idvalue , h1 , .classvalue,p,#idvalue2,.classvalue2{
background-color:yellow;
}派生类选择器
语法格式1：父元素名称 > 子元素名称 {
样式申明；
}
特点：子元素选择器，只作用于指定儿子辈的元素
语法格式2：父元素名称 子元素名称 {
样式申明；
}
特点：后台选择器，作用于指定的所有后辈元素
例如：
<p>
<p>
<p>
<p></p><p><span>立即学习</span>“<a href="https://pan.quark.cn/s/cb6835dc7db1" style="text-decoration: underline !important; color: blue; font-weight: bolder;" rel="nofollow" target="_blank">前端免费学习笔记（深入）</a>”；</p><div class="aritcle_card flexRow">
<div class="artcardd flexRow">
<a class="aritcle_card_img" href="/ai/859" title="Tome"><img
src="https://img.php.cn/upload/ai_manual/000/000/000/175679992061586.jpg" alt="Tome" onerror="this.onerror='';this.src='/static/lhimages/moren/morentu.png'" ></a>
<div class="aritcle_card_info flexColumn">
<a href="/ai/859" title="Tome">Tome</a>
<p>先进的AI智能PPT制作工具</p>
</div>
<a href="/ai/859" title="Tome" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span> </a>
</div>
</div>
</p>
</p>
<p></p><p><span>立即学习</span>“<a href="https://pan.quark.cn/s/cb6835dc7db1" style="text-decoration: underline !important; color: blue; font-weight: bolder;" rel="nofollow" target="_blank">前端免费学习笔记（深入）</a>”；</p>
<h1><h1>
<h3></h3>
<span></span>
</p>
<p></p><p><span>立即学习</span>“<a href="https://pan.quark.cn/s/cb6835dc7db1" style="text-decoration: underline !important; color: blue; font-weight: bolder;" rel="nofollow" target="_blank">前端免费学习笔记（深入）</a>”；</p>属性选择器
语法格式：元素名称[属性="属性值"]{
样式申明；
}
例如：<input type="text" />
input[type="text"]{
background-color:orange;
}伪类选择器
当一个元素的状态发生改变的时候，更改元素的样式
语法格式：
:link 适用于超链接
:visited 适用于超链接
:active 通常适用于按钮
:focus 通常适用于输入框
:hover 鼠标悬浮在元素上时
例如：
<a hred="#" id="a1"> 请点击我1 </a>
<a hred="#" id=""> 请点击我2 </a>
<a hred="#" id=""> 请点击我3 </a>
#a1:link{
样式申明；
}
#a1:visited{
样式申明；
}三、样式和属性
背景的样式
background-color:颜色值，设置背景颜色
background-image:图片的url，设置背景图片
background-repeat:排列方式，设置背景图片的排列方式
repeat;
repeat-x;
repeat-y;
no-repeat;
background-attachment:方式，设置背景图片是否跟随内容移动
scroll;
fixed;边框
border: 宽度 样式 颜色 border: 样式值，（ 设置四个边框的样式 ） border-left/right/top/bottom:样式值 (设置各个边框的样式)
浮动的设置和取消（重点）
将元素脱离文档的普通流中，可以向左或者向右浮动，直到他的边框遇到其父边框或者其他浮动元素的边框时停止。
添加元素：<p id="clearp"></p>
#clearp{
clear:both;
}盒子模型(重点)
外边距：margin
margin-left/right/top/bottom:距离；
margin:距离；
margin:auto; //居中效果
内边距：padding
padding-left/right/top/bottom:距离；
padding:距离；文本样式
color:颜色 font-size:字体大小 font-fimaily:字体 font-weight:粗体
表格属性
border:边框 border-collapse:collapse;去除单元格之间的间距
列表属性
list-style-type: 样式； 列表显示的样式 list-style-image:url(“图片资源位置”)； 列表显示的样式
鼠标样式
cursor:help;
wait;
default;
pointer;
... ...显示方式
display属性，更改元素的显示方式：
block ,将行内元素的显示方式转换成块级元素的显示方式；（上下显示）
inline，将块级元素的显示方式转换成行内元素的显示方式；（左右显示，不能设置宽高）
inline-block，将元素转换成行内块元素；（左右显示，设置宽高的）
<p></p><p><span>立即学习</span>“<a href="https://pan.quark.cn/s/cb6835dc7db1" style="text-decoration: underline !important; color: blue; font-weight: bolder;" rel="nofollow" target="_blank">前端免费学习笔记（深入）</a>”；</p>
<p></p><p><span>立即学习</span>“<a href="https://pan.quark.cn/s/cb6835dc7db1" style="text-decoration: underline !important; color: blue; font-weight: bolder;" rel="nofollow" target="_blank">前端免费学习笔记（深入）</a>”；</p>
<p></p><p><span>立即学习</span>“<a href="https://pan.quark.cn/s/cb6835dc7db1" style="text-decoration: underline !important; color: blue; font-weight: bolder;" rel="nofollow" target="_blank">前端免费学习笔记（深入）</a>”；</p>
p{
display:inline;
}作业：
使用p+重css构简易的商城首页
相关推荐：
