1.什么是css,指的是叠层样式表,控制网页的的外观显示。

2.引入css的三种方式,外部链接,内部链接,内联,分别的语法是,<link rel="stylesheec" type="text/css" href=""/>,<style type="tex/css"></style>,style="属性:值"

3.css选择器,选择器就是要针对你要所改变的元素,而单独定义的样式,就常见的选择器:ID,CLASS,元素选择器,子元素选择器,群组选择器,相邻选择器,id选择器是唯一的意思是,只能定义一个id名相同的,class选择器,类选择器,可以为多个元素定义,id选择器和class选择器的区别在于,id是唯一的就像每个人的身份证一样只有一份号码是唯一的,而class就是像每个人的名字一样可以重复,元素选择器就是选泽要改变的元素标签名字,子选择器就是在当前元素后的子元素,群组合选择器就是选泽所有想改变的元素,相邻选择器就在当前同级元素的下一个元素。

语法:<p id="one">这是一个段落</p>  相应的  css规则: #id{ 属性:值}

<p class="two"></p><p class="two"></p>相应的css规则:.class{ 属性:值}

<p>这是一个段落</P> 相应的css规则:p{属性:值}

<div><p>这是一个段落奥</P></div>相应的css规则:div p{属性:值}

<div><p>这是一个段落奥</P></div>相应的css规则:div,p{属性:值}

<div>

<p>这是一个段落奥</P>相应的css规则:div+div{属性:值}

</div>

<div>

<p>这是一个段落奥</P>

</div>

4.字体样式

字体的类型:font-family:  '';取值宋体,微软雅黑等、

字体的大小:font-size:;通常以像素值px,其他的还有em ,百分比

字体的粗细:font-weight:;取值bold粗体显示,normal正常

字体的样式:font-style:;italic斜体,normal正常

颜色;color;

行高:line-height:;字体的行高,一行的高度不是距离。

5.文本样式

文本装饰:text-decoration:;取值有,line-through(贯穿线),underline(下划线),overline(上划线)

文本对齐:text-align:;取值有,center(居中),left(左对齐),right(右对齐)

文本缩进:text-ident:;取值单位px.em,百分比

文本大小写:text-transform:;取值有 uppercase(大写) lowercase(小写) capitalize(首指母大写)

文本的字间距:letter-sapcing:;取值单位px ,em ,百分比

词间距:word-sapcing:;取值单位px ,em ,百分比

6.边框

border边框 边框的大小 类型 颜色 分别的设置

border-width:; 取值是单位px   em  百分比

border-style:; 取值是solid 实线  dashed虚线 等

border-color:;取值颜色 ,可以是十六进制。

7.背景

背景图片,背景是否被重复 ,背景的位置,背景是否滚动  分别是

background:URL;

background-repeat:;取值有,repeat(重复) no-repeat(不重复) repeat-x(x轴重复) repeat-y(y轴重复)

background-position:;取值可以是   center left right top

background-scroll:;  取值是scroll   fixed

可以简写;background: URL  repeat   position  scroll;

8.超链接样式

当我们鼠标移动到a标签上面,可以让他显示的样式,通过伪类来设置,不一定是a元素才有可以设置,在html中 任何元素可以都已设置伪类。语法:元素:hover

当鼠标未访问的样式a:link;,当鼠标访问后的样式a:visited;当鼠标移动到的样式a:hover;当鼠标按下时的样式a:active;

9图片

图片大小:可以通过设置它的宽度 高度来设置。

图片位置:通过text-align(水平居中),vertical-aligin(垂直居中)

图片边框:通过border来设置它的边框

10列表

列表的样式:list-style-type:;取值none,circle,等

列表图片:list-style-image:;

11表格

表格默认是没有边框的,我要通过border给它值

12,盒子模型

盒子模型分为:内容区,内边距,外边距,边框

13布局

浮动布局:通过float浮动块元素,注意清除浮动。

定位布局:position来设置。然后设置。上右下左的值。

固定定位:position:fixed/scroll

静态定位:position:static

css个人总结的更多相关文章

  1. Matplotlib数据可视化(3):文本与轴

      在一幅图表中,文本.坐标轴和图像的是信息传递的核心,对着三者的设置是作图这最为关心的内容,在上一篇博客中虽然列举了一些设置方法,但没有进行深入介绍,本文以围绕如何对文本和坐标轴进行设置展开(对图像 ...

  2. CSS的未来

    仅供参考 前言 完成<CSS核心技术与实战>这本书,已有一个多月了,而这篇文章原本是打算写在那本书里面的,但本章讲解的内容,毕竟属于CSS未来的范畴,而这一切都还不能够确定下来,所以这一章 ...

  3. 前端极易被误导的css选择器权重计算及css内联样式的妙用技巧

    记得大学时候,专业课的网页设计书籍里面讲过css选择器权重的计算:id是100,class是10,html标签是5等等,然后全部加起来的和进行比较... 我只想说:真是误人子弟,害人不浅! 最近,在前 ...

  4. 前端css兼容性与易混淆的点

    一.常用的骨灰级清除浮动 .clearfix:after { content: "."; display: block; height:; clear: both; visibil ...

  5. 理解CSS外边距margin

    前面的话   margin是盒模型几个属性中一个非常特殊的属性.简单举几个例子:只有margin不显示当前元素背景,只有margin可以设置为负值,margin和宽高支持auto,以及margin具有 ...

  6. 理解CSS视觉格式化

    前面的话   CSS视觉格式化这个词可能比较陌生,但说起盒模型可能就恍然大悟了.实际上,盒模型只是CSS视觉格式化的一部分.视觉格式化分为块级和行内两种处理方式.理解视觉格式化,可以确定得到的效果是应 ...

  7. 谈谈一些有趣的CSS题目(十二)-- 你该知道的字体 font-family

    开本系列,谈谈一些有趣的 CSS 题目,题目类型天马行空,想到什么说什么,不仅为了拓宽一下解决问题的思路,更涉及一些容易忽视的 CSS 细节. 解题不考虑兼容性,题目天马行空,想到什么说什么,如果解题 ...

  8. ASP.NET MVC with Entity Framework and CSS一书翻译系列文章之第二章:利用模型类创建视图、控制器和数据库

    在这一章中,我们将直接进入项目,并且为产品和分类添加一些基本的模型类.我们将在Entity Framework的代码优先模式下,利用这些模型类创建一个数据库.我们还将学习如何在代码中创建数据库上下文类 ...

  9. 谈谈一些有趣的CSS题目(十一)-- reset.css 知多少?

    开本系列,谈谈一些有趣的 CSS 题目,题目类型天马行空,想到什么说什么,不仅为了拓宽一下解决问题的思路,更涉及一些容易忽视的 CSS 细节. 解题不考虑兼容性,题目天马行空,想到什么说什么,如果解题 ...

  10. 梅须逊雪三分白,雪却输梅一段香——CSS动画与JavaScript动画

    CSS动画并不是绝对比JavaScript动画性能更优越,开源动画库Velocity.js等就展现了强劲的性能. 一.两者的主要区别 先开门见山的说说两者之间的区别. 1)CSS动画: 基于CSS的动 ...

随机推荐

  1. DP专题训练之HDU 2955 Robberies

    打算专题训练下DP,做一道帖一道吧~~现在的代码风格完全变了~~大概是懒了.所以.将就着看吧~哈哈 Description The aspiring Roy the Robber has seen a ...

  2. mysql基本语句

    mysql -u root -p; 登录数据库 show databases; 展示数据库 show tables; 展示表 desc messages; 查看messages表的结构 drop da ...

  3. UMLl类图实例

    下面是类图的实例(好像大话设计中有): UML中类图实例 接口:空心圆+直线(唐老鸭类实现了‘讲人话’):依赖:虚线+箭头(动物和空气的关系):关联:实线+箭头(企鹅需要知道气候才迁移):聚合:空心四 ...

  4. Java当中的反射

    1:反射的概念 反射是指一类应用,它们能够自描述和自控制.也就是说,这类应用通过采用某种机制来实现对自己行为的描述(self-representation)和监测(examination),并能根据自 ...

  5. 《利用python进行数据分析》读书笔记--第九章 数据聚合与分组运算(一)

    http://www.cnblogs.com/batteryhp/p/5046450.html 对数据进行分组并对各组应用一个函数,是数据分析的重要环节.数据准备好之后,通常的任务就是计算分组统计或生 ...

  6. JS动态添加option和删除option

    1.动态创建select function createSelect(){ var mySelect = document.createElement("select");     ...

  7. GUI 下

    11.6 Swing组件 JButton JLabel JTextField JTextArea JTable JTree publicclass JTableDemo extends JFrame ...

  8. js 为字符串添加样式

    <html><body> <script type="text/javascript"> var txt="Hello World!& ...

  9. -[NSBundle initWithURL:]: nil URL argument'

    今天早上同事突然跟我说趣拍的SDK不能用了,一调用就crash,我一听就纳了闷了,原来好好的啊. 然后就开始查呗,马上就要上线了,不搞好,老大会不会杀了我... 搞个全局断点,就停在了一堆我看不懂的界 ...

  10. Webpack参考资料

    学习是一种进步,只有不断的向别人学习,才能提升自己.三人行必有我师焉 1. http://www.cnblogs.com/zhengjialux/p/5861845.html