CSS语法、选择器、声明的方法
这篇文章主要讲解了"CSS语法、选择器、声明的方法",文中的讲解内容简单清晰,易于学习与理解,下面请大家跟着小编的思路慢慢深入,一起来研究和学习"CSS语法、选择器、声明的方法"吧!
一、HTML表单
Insert title here 账号:
密码:
性别:
男
女
兴趣爱好:
音乐
看书
打球
头像上传:
城市:
简介:
二、CSS
CSS指层叠样式表,样式定义如何显示HTML元素,样式通常存储在样式表中。
三、CSS如何使用
内联方式:样式定义在单个的HTML元素中
内部样式表:样式定义在HTML页的头元素中
外部样式表:将样式定义在一个外部的CSS文件中(.css)由HTML页面引用样式表文件
css样式演示 /*css的注释*/
h3{color:red;}
CSS
CSS有三种样式
1.内联样式
2.内部样式
3.外部样式
四、CSS规则特性
继承性:父元素的声明可以被子元素继承,如字体、颜色等。
层叠性:同一个元素若存在多个css规则,对于不冲突的声明可以叠加
优先级:同一个元素若存在多个css规则,对于冲突的声明以优先级高着为准。
css优先级演示 /*1.继承性:父元素的样式可以被子元素继承(颜色、字体)*/
body{
font-family:"楷体","微软雅黑";
}
/*2.层叠性:给一个元素设置不同的声明,其效果会叠加*/
h2{
color:red;
}
h2{
font-size:50px;
}
/*3.优先级:给同一个元素设置相同的声明,效果以后者为准,即就近原则*/
h3{
color:green;
}
/*.....*/
h3{
color:yellow;
}
HELLO WORLD!
你好,世界!
五、CSS选择器
元素选择器:通过元素名来选择css作用的目标 比如
、
等
类选择器:允许以一种独立于文档元素的方式来指定样式 语法为:.className{}
id选择器:选择id等于某值的唯一元素。以一种独立于文档元素的方式来指定样式,它仅作用于id属性的值*/
选择器组:写出一组选择器选中每个选择器所对应目标的并集
选择器演示 /*2.类选择器:选择class等于某值的所有元素,class是程序员根据逻辑自己给元素增加的分类*/
.day{
color: blue;
}
/*3.id选择器:选择id等于某值的唯一元素。以一种独立于文档元素的方式来指定样式,它仅作用于id属性的值*/
#fighting{
color:red;
}
/*4.选择器组:写出一组选择器选中每个选择器所对应目标的并集*/
.day,#fighting{
font-weight: bold;
}
/*5.派生选择器*/
/*5.1选择某元素的子孙*/
#p5 b{
color:red;
}
/*5.2选择某元素的儿子*/
#p5>b{
font-size: 30px;
}
/*6.伪类选择器:根据元素的状态选择选择器*/
/*6.1选择未访问过的超链接*/
a:link{
color:green;
}
/*6.2选择已访问过的超链接*/
a:visited {
color: red;
}
/*6.3选择激活态(正在点)的按钮*/
#i1:active{
background-color: blue;
}
/*6.4选择有焦点的文本框、密码框、文本域*/
#i2:focus {
background-color: green;
}
/*6.5选择鼠标悬停态(触碰)的图片*/
img:hover{
width: 250px;
height: 250px;
}
昨天又是忙碌的一天
今天也是忙碌的一天
后天又是忙碌的一天
不管怎么样,生活还得继续呀
北京市海淀区200号5号楼5号房
边框:
Insert title here /*1.四个边设置相同的边框*/
p{
border:1px dashed red;
}
/*2.单个边设置边框*/
/*left/right/top/bottom*/
h2{
border-left: 10px solid blue;
}
/*3.块元素一般宽度默认是100%,高度为自适应,内容越多,它越高。当给他固定高度时,可能会导致内容溢出,*/
p{
width: 300px;
height: 60px;
/*溢出时的处理*/
overflow:auto;
}
李白
李白(701年-762年) ,字太白,号青莲居士,又号"谪仙人",是唐代伟大的浪漫主义诗人,
被后人誉为"诗仙",与杜甫并称为"李杜",为了与另两位诗人李商隐与杜牧即"小李杜"区别,
杜甫与李白又合称"大李杜"。据《新唐书》记载,李白为兴圣皇帝(凉武昭王李暠)九世孙,
与李唐诸王同宗。其人爽朗大方,爱饮酒作诗,喜交友。
边距:
Insert title here div{
border:1px solid red;
width:100px;
height:100px;
}
/*1.四个边设置相同的边距()*/
#d1{
padding:20px;
margin:30px;
}
/*2.四个边设置不同的边距(上右下左)*/
#d2{
padding:10px 20px 30px 40px;
margin:40px 30px 20px 10px
}
/*3.单个边设置边距
left/right/top/bottom*/
#d3{
padding-left: 20px;
margin-bottom: 40px;
}
/*4.对边设置相同的边距*/
/*先上下 后左右*/
#d4{
padding:20px 40px;
margin:30px 10px;
}
/*5.对边设置边距的特例*/
/*在设置外边距时,若左右外边距值为auto,则该元素水平居中*/
#d5{
margin:20px auto;
}
- d0
- d1
- d2
- d3
- d4
- d5
感谢各位的阅读,以上就是"CSS语法、选择器、声明的方法"的内容了,经过本文的学习后,相信大家对CSS语法、选择器、声明的方法这一问题有了更深刻的体会,具体使用情况还需要大家实践验证。这里是,小编将为大家推送更多相关知识点的文章,欢迎关注!