CSS样式的处理
程序员文章站
2022-03-29 11:42:37
...
这篇文章主要介绍了关于CSS样式的处理 ,有着一定的参考价值,现在分享给大家,有需要的朋友可以参考一下
4/23/2018 8:23:35 AM
CSS
晨测:
1. 标准的一个html文件的结构 2. 指定颜色和资源位置的方式 3. 常用标签 设置各级标题: 设置段落: 设置文本格式: 超链接: 图片标签: 表格的基本形式: 表单标签: 框架标签:
回顾
今日概要
一、CSS概述 二、CSS的选择器(认识) 三、CSS样式和属性(练习) 四、重构商城首页p+CSS(页面布局)(重点) 浮动/更改显示方式
一、CSS概述
<1>概念
p,就是一个HTML元素,块级元素,通常结合CSS进行页面的布局。 CSS,层叠样式表,给HTML元素增强显示。
<2>作用
样式定义如何显示HTML元素,页面的布局(美化HTML效果)
<3>使用方式
内联样式方式:在当前的元素属性中直接设置style属性,适用性差,只能作用于当前元素。 style属性是HTML元素通用的属性 内部样式方式:在head标签中,使用<style>标签来设置样式,适用性强,可以同时作用于一个页面的多个元素。 外部样式方式:创建.css样式文件,在此文件中设置元素的样式,在需要使用的页面中使用<link>元素引入。适用性最强, 可以通过作用于多个页面。
<4>语法
选择器{ 样式申明 } 1. 查找需要设置样式的元素 ,选择器可以用来查找元素 2. 设置样式 ,属性名称:属性值 ;属性名称:属性值 ; 3. 例如: h1{ color:#ff0000; font-size:25px; ...:...; } 注意:样式申明中,如果不是最后一个属性值,后面的分号不可以省略。
<5>特点
继承性:子元素可以继承父元素的样式 层叠性:同一个元素可以使用多个样式,如果不冲突,效果叠加 优先级:默认的样式 ---外部样式 --- 内部样式--- 内联样式 (由低到高,就近原则)
二、选择器
<1>元素选择器
语法格式:元素名称{ 样式申明; } 特点:适用于相同元素的样式设置
<2>类选择器
语法格式: .类属性值{ class属性:属性值 样式申明; } 特点:适用于不相同元素的样式设置 例如:通过类选择器查找h1元素 <h1 class="h1class"></h1> .h1class{ }
<3>id选择器
语法格式: #id属性值{ 样式申明; } 特点:使用于一个具体的元素的样式设置 例如:通过id选择器查找一个具体的h1标签 <h1 id="idvalue"></h1> #idvalue{ }
<4>选择器组
语法格式:选择器1,选择器2,...{ 样式申明; } 特点:可以在多个不同的选择器中重用样式 例如: #idvalue , h1 , .classvalue,p,#idvalue2,.classvalue2{ background-color:yellow; }
<5>派生类选择器
语法格式1:父元素名称 > 子元素名称 { 样式申明; } 特点:子元素选择器,只作用于指定儿子辈的元素 语法格式2:父元素名称 子元素名称 { 样式申明; } 特点:后台选择器,作用于指定的所有后辈元素 例如: <p> <p> <p> <p></p> </p> </p> <p></p> <h1><h1> <h3></h3> <span></span> </p> <p></p>
<6>属性选择器
语法格式:元素名称[属性="属性值"]{ 样式申明; } 例如:<input type="text" /> input[type="text"]{ background-color:orange; }
<7>伪类选择器
当一个元素的状态发生改变的时候,更改元素的样式 语法格式: :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{ 样式申明; }
三、样式和属性
<1>背景的样式
background-color:颜色值,设置背景颜色 background-image:图片的url,设置背景图片 background-repeat:排列方式,设置背景图片的排列方式 repeat; repeat-x; repeat-y; no-repeat; background-attachment:方式,设置背景图片是否跟随内容移动 scroll; fixed;
<2>边框
border: 宽度 样式 颜色 border: 样式值,( 设置四个边框的样式 ) border-left/right/top/bottom:样式值 (设置各个边框的样式)
<3>浮动的设置和取消(重点)
将元素脱离文档的普通流中,可以向左或者向右浮动,直到他的边框遇到其父边框或者其他浮动元素的边框时停止。 添加元素:<p id="clearp"></p> #clearp{ clear:both; }
<4>盒子模型(重点)
外边距:margin margin-left/right/top/bottom:距离; margin:距离; margin:auto; //居中效果 内边距:padding padding-left/right/top/bottom:距离; padding:距离;
<5>文本样式
color:颜色 font-size:字体大小 font-fimaily:字体 font-weight:粗体
<6>表格属性
border:边框 border-collapse:collapse;去除单元格之间的间距
<7>列表属性
list-style-type: 样式; 列表显示的样式 list-style-image:url(“图片资源位置”); 列表显示的样式
<8>鼠标样式
cursor:help; wait; default; pointer; ... ...
<9>显示方式
display属性,更改元素的显示方式: block ,将行内元素的显示方式转换成块级元素的显示方式;(上下显示) inline,将块级元素的显示方式转换成行内元素的显示方式;(左右显示,不能设置宽高) inline-block,将元素转换成行内块元素;(左右显示,设置宽高的) <p></p> <p></p> <p></p> p{ display:inline; }
作业:
使用p+重css构简易的商城首页
相关推荐:
以上就是CSS样式的处理 的详细内容,更多请关注其它相关文章!