您的位置：首页 > Web前端 > CSS

webBasic_day03_CSS_选择器_hover_盒子模型（padding, margin)

2018-03-17 13:46 806 查看

CSS

层叠样式表

CSS样式编写方式

内联样式–学习和测试的时候使用

<a href="#" style="color:red;font-size:64px;">内联样式</a>


1.1 内联样式不能重用,所以使用不多

1.2 内联样式的优先级最高

1.3 项目中一般只用内联样式写display:none

内部样式

2.1 在head标签中使用style标签声明css样式

<style type="text/css">
/* 选择器 {属性:样式} */
h3 {
color: #006699;
}
</style>


2.2 这样写样式,在本html页面中可以被重用

外部样式



—–style.css

h2{
color:#006699;
}
a{
color:#660099;
}


—-demo4.html

    <link rel="stylesheet"
type="text/css" href="style.css">
<style type="text/css">
/* 选择器 {属性:样式} */
h3 {
color: #006699;
}
a{
color:#006699;
}
</style>
</head>
<body>
<a href="#" style="color:red;font-size:64px;">内联样式</a><h3>内部样式的演示</h3>
<h3>内部样式的演示1</h3>
<h2>外部样式的样式</h2>
</body>


样式优先级的问题

浏览器默认样式的优先级最低

内部样式 或者外部样式,就近优先

内联样式优先级最高

选择器

找到要更改样式的标签(一个,多个)

CSS的选择器

标签选择器 
p{color:red;}
,基本样式定义

id选择器 
#id{属性:值;}


类选择器 
.class{属性:值}


派生选择器

在结构关系中,只要内部存在,不管隔着多少级,都会被认可

<div>
<ul>
<a href="#">不符合派生的结果关系</a>
<li><a href="#">派生选择器</a></li>
<li><a href="#">派生选择器</a></li>
<li><a href="#">派生选择器</a></li>
<li><a href="#">派生选择器</a></li>
</ul>
<ul>
<li><span><a>不符合派生的a标签</a></span></li>
</ul>
</div>

div ul li a{
/* 派生选择器 */
color:red;
}


子类选择器

结构关系中,只认可直接子集,孙子级别不管

div>ul>li>a{
/* 子类选择器 */
color:red;
}


分组选择器

h1,h2,h3,p,div,li,a{
/* 定义基础样式的时候使用,随时等待被覆盖 */
color: yellow;
}


注意

由于各个厂商浏览器存在兼容性问题,一般开发的时候,会优先写一段样式,把兼容性问题尽量清除

*{
margin: 0px;
padding: 0px;
font-size: 12px;
color: black;
}


伪类选择器:hover

当鼠标悬停至元素上方时,向该元素添加样式

img {
width: 100px;
}
img:hover {
width: 256px;
}

<img alt="" src="../img/06.png">
<img alt="" src="../img/07.png">
<img alt="" src="../img/08.png">
<img alt="" src="../img/09.png">


css常用样式属性

1.布局相关属性

1.1 宽高 width: height: px 100%

1.2 margin:外边距

margin:100px; 设置4个方向都是100px;
margin:10px 20px;上下是10px,左右是20px
margin:10px 5px 3px 4px;上右下左.

margin-top: 设置上外边距
margin-right:设置右外边距
margin-bottom:设置下外边距
margin-left:设置左外边距
margin:0px auto; 块级元素水平居中


通常块级元素在父级元素内部的位移,使用margin

内边距 padding

padding:100px; 设置4个方向都是100px;

padding:10px 20px;上下是10px,左右是20px

padding:10px 5px 3px 4px;上右下左.

padding-top: 设置上内边距

padding-right:设置右内边距

padding-bottom:设置下内边距

padding-left:设置左内边距


内边距是边框到内容区域的距离

注意,改变padding会改变当前块级所占位置的宽高

所以,如果使用padding要注意,宽高减去内边距的值

盒子模型

元素之间有留白,元素本身占位大小,元素背景的填充范围

计算上述这些位置的规则,就是盒子模型

盒子模型计算元素宽度公式

左外边距+左边框+左内边距+内容区域宽度+右内边距+右边框+右外边距

一个div如果不写宽高

宽默认是父元素100%的宽

高默认是0,内部区域有多高,这个div撑起多高

2.背景属性

background-color: 背景颜色
background-image: 背景图片
background-repeat: no-repeat;平铺方式
background-position: right bottom;图片定位


一旦为div设置了背景图片

div内部的元素将会在背景图片之上显示

css关于颜色值的设置

RGB #aabbcc 16进制表示颜色

#abc

rgb(255,255,255)

英文单词 red之类

rgba(255,255,255,0.5)透明度

3.字体属性

font-size:字体大小
单位:30px  30cm  em相对的度量单位

color:字体颜色
font-family:"黑体","微软雅黑";
font-weight:字体的粗细
lighter;细一些
normal;正常
bold;加粗
bolder;比粗更粗
font-style:字体的样式
italic;斜体  <i></i>


4.文本属性

text-align:文本的对齐方式
left;
right;
center;
line-height: 200px;/* 行高 */
/* 如果行高设置成本控件的高度,
那么内部文本垂直居中  */
/* 如果内容文本发生折行,每一行都会认为有
200的行高,效果不符合预期,要注意 */

text-decoration: none;  清除按标签下划线
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航