CSS基础-插曲
2016-01-30 00:00
537 查看
CSS学习
1：通过css来设置边框的颜色
我们可以通过border:10px solid red;来统一的设置颜色，但是我们有的时候需要每个边框的颜色不一样，我们就需要通过各自设置的方法来设置边框的颜色。
<body>
<!--这里是设置边框的，设置4的方向上的，使用border来进行设置就行。-->
<div style="color:red;
font-family: 楷体;
font-size: 50px;
background-color: blue;
width:300px;
/*border:10px dashed red;*/
border-top: 10px solid red ;
border-bottom:10px dashed yellow;
border-left: 10px solid burlywood;
border-right: 10px solid purple;
">
<p>你好世界</p>
<p>你好世界</p>
<p>你好世界</p>
<p>你好世界</p>
</div>
只是通过在div中的style中写，我们要是写css一定要写在head中，切记不要这样的书写。
div中的溢出我们应该如何办。我们可以添加属性，overflow:"";我们可以选择性的进行隐藏溢出的部分。
2：行内元素设置高宽是没用的，我们必须将其设置为块级元素才能设置，比如<span>元素。
span style="border:1px solid:red; width: 200px;height: 300px;">你好吗</span>
这样子是没有效果的，我们要将其设置为块状的元素才行。加上属性display:block;这样子才会显示出来效果。
3：首行缩进的方法
利用css的属性，text-indent:4em;可以实现首行缩进的功能。不再使用空格来写。
4：<margin>标签的学习
Margin标签是表示元素内边距，设置4周都会改变，<p>标签段落之间的距离就是使用了margin来调节。关于这个的理解我们可以打开F12看网页中的显示效果就可以知道了。
5：关于选择器
选择器的形式很多种，我们只需要知道经常使用的那几个就行了。在后面js和JQuery中还有选择器。
我们需要让一个选择器运用多个样式，我们需要在选择器中加个空格写上选择器的名就行，只要不重复就可以。关于选择器的优先级，是类的选择器高于标签选择器，同时id选择器高于类选择器。[Id>类>标签];在同等优先级下，谁最后定义的样式，谁显示效果。
把多个选择器可以组合在一起，这样就是多个标签都显示这个效果。
我们想要让其某个元素的优先级高可以这样设置，在其css后面加上！important就可以让其优先级高。
6:伪选择器
这个我还是第一次听说，但是以前好像看见过，就是在选择器后面冒号在写。
<style type="text/css">
/*这里使用伪类来实现功能*/
a:link
{
font-family: 楷体;
color: burlywood;
text-decoration: none;
}
a:hover
{
color: yellow;
text-decoration: underline;
}
a:active {
color: red;
text-decoration: line-through;
}
a:visited {
color: black;
font-family: 宋体;
}
</style>
7：文档流
将窗体自上而下分成一行行，并在每行中按从左至右的顺序排放元素。其实我们的网页就是安装文档流的形式来展示的。我们可以通过一些方法来脱离文档流，让其可以自定义显示。属性position:通过这个属性来看元素是否脱离文档流。Absolute:绝对定位，相对于整个文档，,fixed是相对于可视区域的位置，是固定定位。Relative这个是相对定位，是相对于当前的位置而言的。
8：float：布局的属性
这个最主要的是在div中使用，让其块状的元素可以自由的浮动，根据需求变化。这里的浮动也是和上面的一样，只要发生了浮动就脱离了文档流后面的元素就会跑到原来的位置，我们设置布局的时候，浮动就是要想办法将其元素放到我们想要的位置就行。
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title></title>
<style type="text/css">
#div1 {
width: auto;
height: 100px;
background-color: yellow;
}
#div2 {
background-color: blanchedalmond;
width: auto;
height: 400px;
}
#div3 {
background-color: red;
width: auto;
height: 100px;
}
#div_left {
float: left;
width: 30%;
height: 100%;
background-color: blue;
}
#div_center {
float: left;
width: 60%;
height: 100%;
background-color: blueviolet;
}
#div_right {
float: left;
width: 10%;
height: 100%;
background-color: darkgoldenrod;
}
</style>
</head>
<body>
<div id="div1"></div>
<div id="div2">
<div id="div_left"></div>
<div id="div_center">
</div>
<div id="div_right"></div>
</div>
<div id="div3"></div>
</body>
</html>
9：在css文件中导入css文件
通过@import url(11.css);这种形式就可以导入别的css文件了。这是模块化的设计.
10：盒子模型的理解
就是说，这个元素的大小不是我们设置的，元素的大小是由于盒子的各方面属性盒子来决定的。以前总是写这个但是不是很理解，现在终于知道了，其实也不是很难的。
11：框架
**1:iframe:不分割当前的页面就可以嵌入某个页面**
就是可以在某个网页某个区域进行嵌入别的页面内容。
**2：frameset
可以把页面进行结构化的划分，就是每个页面都要嵌入别的页面.现在这个已经不用了。都封装到了别的里面去了。
1：通过css来设置边框的颜色
我们可以通过border:10px solid red;来统一的设置颜色，但是我们有的时候需要每个边框的颜色不一样，我们就需要通过各自设置的方法来设置边框的颜色。
<body>
<!--这里是设置边框的，设置4的方向上的，使用border来进行设置就行。-->
<div style="color:red;
font-family: 楷体;
font-size: 50px;
background-color: blue;
width:300px;
/*border:10px dashed red;*/
border-top: 10px solid red ;
border-bottom:10px dashed yellow;
border-left: 10px solid burlywood;
border-right: 10px solid purple;
">
<p>你好世界</p>
<p>你好世界</p>
<p>你好世界</p>
<p>你好世界</p>
</div>
只是通过在div中的style中写，我们要是写css一定要写在head中，切记不要这样的书写。
div中的溢出我们应该如何办。我们可以添加属性，overflow:"";我们可以选择性的进行隐藏溢出的部分。
2：行内元素设置高宽是没用的，我们必须将其设置为块级元素才能设置，比如<span>元素。
span style="border:1px solid:red; width: 200px;height: 300px;">你好吗</span>
这样子是没有效果的，我们要将其设置为块状的元素才行。加上属性display:block;这样子才会显示出来效果。
3：首行缩进的方法
利用css的属性，text-indent:4em;可以实现首行缩进的功能。不再使用空格来写。
4：<margin>标签的学习
Margin标签是表示元素内边距，设置4周都会改变，<p>标签段落之间的距离就是使用了margin来调节。关于这个的理解我们可以打开F12看网页中的显示效果就可以知道了。
5：关于选择器
选择器的形式很多种，我们只需要知道经常使用的那几个就行了。在后面js和JQuery中还有选择器。
我们需要让一个选择器运用多个样式，我们需要在选择器中加个空格写上选择器的名就行，只要不重复就可以。关于选择器的优先级，是类的选择器高于标签选择器，同时id选择器高于类选择器。[Id>类>标签];在同等优先级下，谁最后定义的样式，谁显示效果。
把多个选择器可以组合在一起，这样就是多个标签都显示这个效果。
我们想要让其某个元素的优先级高可以这样设置，在其css后面加上！important就可以让其优先级高。
6:伪选择器
这个我还是第一次听说，但是以前好像看见过，就是在选择器后面冒号在写。
<style type="text/css">
/*这里使用伪类来实现功能*/
a:link
{
font-family: 楷体;
color: burlywood;
text-decoration: none;
}
a:hover
{
color: yellow;
text-decoration: underline;
}
a:active {
color: red;
text-decoration: line-through;
}
a:visited {
color: black;
font-family: 宋体;
}
</style>
7：文档流
将窗体自上而下分成一行行，并在每行中按从左至右的顺序排放元素。其实我们的网页就是安装文档流的形式来展示的。我们可以通过一些方法来脱离文档流，让其可以自定义显示。属性position:通过这个属性来看元素是否脱离文档流。Absolute:绝对定位，相对于整个文档，,fixed是相对于可视区域的位置，是固定定位。Relative这个是相对定位，是相对于当前的位置而言的。
8：float：布局的属性
这个最主要的是在div中使用，让其块状的元素可以自由的浮动，根据需求变化。这里的浮动也是和上面的一样，只要发生了浮动就脱离了文档流后面的元素就会跑到原来的位置，我们设置布局的时候，浮动就是要想办法将其元素放到我们想要的位置就行。
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title></title>
<style type="text/css">
#div1 {
width: auto;
height: 100px;
background-color: yellow;
}
#div2 {
background-color: blanchedalmond;
width: auto;
height: 400px;
}
#div3 {
background-color: red;
width: auto;
height: 100px;
}
#div_left {
float: left;
width: 30%;
height: 100%;
background-color: blue;
}
#div_center {
float: left;
width: 60%;
height: 100%;
background-color: blueviolet;
}
#div_right {
float: left;
width: 10%;
height: 100%;
background-color: darkgoldenrod;
}
</style>
</head>
<body>
<div id="div1"></div>
<div id="div2">
<div id="div_left"></div>
<div id="div_center">
</div>
<div id="div_right"></div>
</div>
<div id="div3"></div>
</body>
</html>
9：在css文件中导入css文件
通过@import url(11.css);这种形式就可以导入别的css文件了。这是模块化的设计.
10：盒子模型的理解
就是说，这个元素的大小不是我们设置的，元素的大小是由于盒子的各方面属性盒子来决定的。以前总是写这个但是不是很理解，现在终于知道了，其实也不是很难的。
11：框架
**1:iframe:不分割当前的页面就可以嵌入某个页面**
就是可以在某个网页某个区域进行嵌入别的页面内容。
**2：frameset
可以把页面进行结构化的划分，就是每个页面都要嵌入别的页面.现在这个已经不用了。都封装到了别的里面去了。
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- webstorm中如何自定义字体样式
- css中格子样式的实现
- css学习笔记20160128对齐组合选择符伪类伪元素
- CSS通过边框border-style来写小三角
- HTML仿CSDN博文内容摘要样式
- css3处理sprite背景图压缩来解决H5网页在手机浏览器下图标模糊的问题
- css实现屏幕自适应（仿谷歌静态页面）
- css切图Sprites
- 2016.01.29--h5第七天之css
- 【CSS】初识选择器（2）
- Css Hack
- 【CSS】初识选择器（1）
- CSS3—3D翻转
- 一段神奇的CSS
- 传智播客168期JavaEE就业班(第二天 css)
- 调用css时，用link 和 @import url 有什么区别
- grid 布局 CSS3
- IE6中CSS方法实现PNG图片透明
- EditText自定义样式
- 彻底弄懂css中单位px和em,rem的区别