首页 > Web开发 > 详细

css-知识总结

时间:2019-04-22 18:54:53      阅读:177      评论:0      收藏:0      [点我收藏+]

是什么

CSS通常称为CSS样式或层叠样式表,主要用于设置HTML页面中的文本内容(字体,大小,对其方式等),图片的外形

(高宽、边框样式、边距等)以及版面的布局等外观显示样式。

CSS可以是HTML页面更好看,CSS色系的搭配可以让用户更舒服,CSS+DIV布局更佳灵活,更容易绘制出用户需要的结构。

引入样式的三种常用样式:

1.行内样式:

 <a style="color: #f00; font-size:30px;">行内样式</a>

2.内部样式:

<style type="text/css">

body{
background-color:#ddd;

}


</style>

3.外部样式:

<link rel="stylesheet" type="text/css" href="css/demo00.css"/>引用方式

  优先级:行内样式------->内部样式------>外部样式

选择器

常用三种:

id选择器:

#demo1{

color:#0f0;

}

<h1 id="demo1">id选择器</h1>

类选择器:

.myClass{

font-size:25px;


}

<h1 class="myClass">Java 软件开发</h1>

元素选择器:

h1{
color:#F00;

font-size:50px;


}


<h1>华信智原</h1>

 

(了解)属性选择器:

<style>

input[type=‘text‘]{

background-color:yellow;
}

input[type=‘password‘]{

background-color:green;
}

</style>

包含选择器:

<style>

#d1 div{

color:red;

}

</style>

div:独占一行

浮动;float

常用属性值:

lfet:元素向左浮动

right:元素想右浮动

none:元素不浮动(默认)

取消浮动:clear

常用属性值:

left:不允许左侧有浮动

right:不允许右侧有浮动

both:同时清除左右两侧浮动的影响

转化:display

用于<span>转化

inline:此元素将显示为行内元素(行内元素默认的display属性值)

block:此元素将显示为块元素(块元素默认的display属性值)

inline-block: 将对象呈递为内联对象,但是对象的内容作为块对象呈递。

none:此元素将被隐藏,不显示,也不占用页面空间。


例如:


<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
span{
border: 1px solid #000;
width:100px;
height: 40px;

}
</style>
</head>
<body>
<!--默认显示一行,边框环绕,高度没有作用-->
<span>显示1-1</span>
<span>显示1-2</span>

<!--每一行显示,高宽有作用-->
<span style="display:blo ck;">显示2-1</span>
<span style="display:block;">显示2-2</span>

</body>
</html>

边框:border

外边框:margin

内边据:padding

 

css-知识总结

原文:https://www.cnblogs.com/yang-12138/p/10751920.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!