码迷,mamicode.com
首页 > Web开发 > 详细

CSS学习

时间:2017-09-20 00:42:09      阅读:262      评论:0      收藏:0      [点我收藏+]

标签:name   one   英文   red   style   自动   用法   技术   消失   

CSS

css是英文Cascading Style Sheets的缩写,称为层叠样式表,用于对页面进行美化。

存在方式有三种:元素内联、页面嵌入和外部引入,比较三种方式的优缺点。

语法:style = ‘key1:value1;key2:value2;‘

  • 在标签中使用 style=‘xx:xxx;‘
  • 在页面中嵌入 < style type="text/css"> </style > 块
  • 引入外部css文件

css写在head里面,style标签中写样式

ID用 #号来表示,class 可以用 .表示

在css里面注释用/*   xxxxxxxxxxxxxxxxx   */  表示

标签选择器

div{ } 
<div > </div>

class选择器

.bd{ } 
<div class=‘bd‘> </div>

id选择器

#idselect{ } 
<div id=‘idselect‘ > </div>

关联选择器 (可以层级选择)

#idselect p{ } 
<div id=‘idselect‘ > <p> </p> </div>

组合选择器

input,div,p{ }   #每个都可以应用

属性选择器

input[type=‘text‘]{ width:100px; height:200px; } 

<input type="text" name="user"/>

class 优先级或者重叠

 .c1{
            background-color:red;
            height:60px;
        }
        .c2{
            font-size:50px;

        }

一个div里可以有两个class样式  ,两个不一样的时候会一起选用,如果有重叠的话会先用style   class  和div中的

<div class="c1 c2">这里测试</div>

引入 css文件 可以适用于其它网页的属性

 <link rel="stylesheet" href="xxx.css"/>

常用 css属性

font-size:50px;
border: 3px dotted red; 宽度为3px  虚线 红色
border: 3px solid red;  实线
height 48px;  高度
width  80%; 宽度  可以用像素,也可以用百分比
text-align ceter  水平居中
line-height  上下居中
font-weight 400  字体加粗

float用法,display用法

<div style="width:90px; height:30px; border: 1px solid red;float: left;"> 这里测试</div>
<div style="clear: both;"></div>将float清除
<div style="display: block">测试</div>  将div变成块级标签
<div style="display: inline">测试</div>  将div变成内联标签(行内标签),默认自己有多少占多少
<div style="display: inline-block">测试</div> 两个属性都有
<div style="display: none">测试</div> 让标签消失
行内标签,无法设置高度宽度,块级标签能设置

 

 边距属性

padding: 20px; 内边距
margin: 30px; 外边距
margin: 0 auto; 可以将网页边上空余的去掉 ,auto 自动

技术分享

 

CSS学习

标签:name   one   英文   red   style   自动   用法   技术   消失   

原文地址:http://www.cnblogs.com/Mjonj/p/7554711.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!