1、CSS介绍
概念:层叠样式表或者级联样式表(Cascading Stylr Sheets)
层叠;CSS特性
CSS作业:设置网页结构的样式(改变html标签的样式),通过CSS给HTML标签设置属性到改变样式
CSS书写位置介绍:
* 内嵌式写法:书写在HTML的head位置
<style type="text/css">书写CSS代码</style>
* 外链式写法
* 行内式写法
CSS语法:
* 选择器 {属性:值;属性:值}
选择标签的过程
** 标签选择器
** 类选择器
** id选择器
** 通配符选择器
** 交集选择器(标签指定式)
** 后代选择器
** 子代选择器
** 并集选择器
补充选择器(C3):
伪类选择器:
属性选择器
伪元素选择器:
* CSS样式的基本属性(字体属性,颜色属性,边框属性)
** 字体属性:主要包括字体综合设置、字体名称、字体大小、字体风格、字体加粗、字体英文大小写转换
font:设置或者检索对象中文本特性的复合属性
font-family:一个指定字体名称或者一个种类的字体名称(一次可以设置多个字体,字体与字体之间用“,”隔开)
* 直接设置字体对应的名称(黑体,宋体)
* 设置字体对应的英文名称(SimSun,NSimSun,SimHei)
font-size:字体显示的大小
font-style:以3种方式的一种显示字体:normal(普通)、italic(斜体)和oblique(倾斜)
font-weight:使字体加粗或者变细(normal,700-加粗,bold-加粗,400-正常显示)
font-variant:设置英文大小写转换
** 颜色和背景属性
CSS的颜色属性允许设计者指定页面元素的颜色,背景属性用于指定页面的背景颜色或背景图像的属性
color:设定页面颜色的前景色
background-cokor:设定页面元素的背景色
background-image:设定页面元素的背景图像
background-repeat:设定一个指定的背景图像被重复的方式
background-attachment:设定背景图像是的跟随页面滚动
background-position:谁当水平或者垂直方向上的位置
background:背景属性的综合指定
** 边框属性
用于设置一个元素边框的宽度、样式和颜色
border 边框符合属性
border-top:上边框
border-left:左边框
border-right:右边框
border-bottom:下边框
border-color:边框颜色
border-style:边框样式
border-width:边框宽度
border-top-color:上边框颜色
border-bottom-color:下边框颜色
border-left-color:左边框颜色
border-right-color:右边框颜色
border-top-style:上边框样式
border-bottom-style:下边框样式
border-left-style:左边框样式
border-right-style:右边框样式
border-top-width:上边框宽度
border-bottom-width:下边框宽度
border-left-width:左边框宽度
border-right-width:右边框宽度
**边框样式属性
none:无边框
hidder:隐藏边框(IE不支持)
dotted:边框由点组成
dashed:边框由短线组成
solid:边框是实线
double:边框是双实线
groove:边框带有立体感的沟槽
ridge:边框成脊型
inset:边框内嵌一个立体边框
outset:边框外嵌一个立体边框
* 标签选择器
HTML标签名 {属性:值;}:会把页面中的所有相同的标签都会选中
常用属性:
color:设置前景色(文字颜色)
background-color:设置背景色
font-size:设置文字大小
width:设置宽度
height:设置高度
text-align: center;设置内容(文字、图片)显示位置
注意:该属性只能给块级元素设置
text-indent: 2em; 设置首行缩进两个字符
<style type="text/css">
/*标签选择器*/
p {
color: rgb(234,12,12); /*改变文字颜色*/
font-size: 50px; /*改变文字大小 */
background-color: #D82F92; /*改变背景颜色*/
width: 300px; /*设置宽度*/
height: 300px; /*设置高度*/
}
</style>
* 单位介绍
px:像素
em:1em = 一个文字大小
* 颜色的表示方式
** 直接设置颜色的名称:red,green,pink
** 使用十六进制表示 #0-f
** 使用三原色rgb()
r:0-255
g:0-255
b:0-255
** 半透明颜色:background-color: rgba(0,0,0,0.5);
rgba()
a : 0-1
** 使用opacity实现半透明
opacity:0-1
background-color: #D82F92;
opacity: 0.5;
filter:Alpha(opacity=50);/*IE8以及更早版本的浏览器*/
* 类选择器
.自定义类名 {属性:值;}
使用:
** 通过.自定义类名,定义一个类样式
.p_red { color: red;}
** 标签通过class属性调用类样式
<p class="p_red">类选择器1</p>
特点:
** 一个类样式可以被多个标签调用
** 一个标签可以同时调用多个类样式,只需要在类名字之间加一个空格
<p class="p_red public_size">类选择器1</p>
<p class="p_green public_size">类选择器2</p>
命名规范:
头;header
内容:content、container
尾:footer
导航:nav
侧栏:sidebar
栏目:column
页面外围控制整体布局宽度;wrapper
左右中;left right center
登录条:loginbar
标志:logo
广告:banner
页面主体:main
热点:hot
新闻:news
下载:download
子导航:subnav
菜单:menu
子菜单:submenu
搜索:search
友情链接:friendlink
页脚:footer
版权:copyright
注意:不能使用纯数字或者以数字开头定义类名
不能使用中文命名
不能使用特殊字符或者使用特殊字符开头定义类名
不推荐使用类名和标签名定义类名
* ID选择器(不建议用)
语法:#自定义名称 {属性:值;}
使用:
** 首先通过#自定义名称,定义一个id选择器样式
#p_color {color:red;}
** 标签通过id属性调用id样式
<div id="p_color">gerrynihao</div>
ID选择器与类选择器的区别:
** 页面中标签的id必须唯一,不能重用样式的定义
** 一个标签只能调用一个id样式,id选择器不能调用多个ID样式,类选择器可以调用多个类样式
* 通配符选择器
语法:* {属性:值;}
特点:该选择器会把所有标签都选中(包括body选择器)
应用:样式初始化使用(因为不同的浏览器有不同的默认样式,需要初始化页面的文字样式)
* font属性联写
font:font-size font-weight font-style font-family line-height
font:700(粗体) italic(斜体) 30px(字体大小)/20px(行高) 微软雅黑;
注意:
1.属性联写书写过程中必须要设置font-size和font-family,其他可以设置也可以不设置
2.在属性联写中font-size必须要放在font-family之前(例如:30px/20px 微软雅黑)
3.如果font属性联写中的属性都要设置,则按照上面顺序设置
* 复合选择器
**标签指定式选择器
语法:
标签名.类名 {属性:值;}
或者 标签名#id名 {属性:值;}
div.one {
color: red
}
** 后代选择器
注意:
1,后代选择器标签之间必须是嵌套关系
2.选择器与选择器之间必须用空格隔开
3.后代选择器只能选择后代标签
语法:
选择器 选择器 选择器 {属性:值;}
div p {
color: green
}
* 并集选择器
语法:
选择器,选择器 {属性:值}
注意:
1.选择器与选择器之间必须用“,”隔开
2.选择器标签之间的结构可以是任意一种关系
* 子代选择器
语法:
选择器>选择器 {属性:值;}
注意:
1.子代选择器之间必须是嵌套结构
2.子代选择器只能选中直接后代元素
3.后代选择器可以选中所有后代元素
div>span {
color: red;
}
* 属性选择器(会把页面中所有的属性相同的样式进行改变)
语法:
[属性名] {属性:值;}
[id][class] {
color: red;
}
属性其他选择器
[属性=值] {}
[属性^=字母] { } 选中以字母开始的标签
[属性$=字母] { } 选中以字母结尾的标签
[属性*=字母] { } 选中包含字母的标签
* 伪类选择器(用于列表标签)
◇ 结构伪类
语法:
选择器:first-child {属性: 值;}
选择器:last-child {属性: 值;}
选择器: nth-child(n) {属性: 值;}
选择器:nth-last-child(n) {属性: 值;}
选择器:nth-child(odd) {属性: 值;} 奇数
选择器:nth-child(even) {属性: 值;} 偶数
◇ 目标伪类
◇ 空伪类
◇ 排除伪类
Web前端H5之CSS样式总结
最新推荐文章于 2024-09-09 19:04:42 发布