CSS的3种引用方式：1.外部样式表 都是在head标签内使用Link标签来引用的。
2.内部样式表 <style type="text/css">
</style>标签对是放在<head></head>中的。
3.内联样式表（代码冗余，不推荐使用）

!important优先级是最高的，属性：值!important
基本选择器：
1，元素选择器：就是选择相同的元素，然后对相同的元素设置同一个CSS样式。
（在style中设置属性，然后在body中的标签开始调用相同属性的元素）

2，id选择器：可以为元素设置一个id，然后针对这个id的元素进行css样式操作，一个页面不能出现相同的Id.
id名前面必须加上前缀#，否则该选择器无法生效，id名前面加上#代表这是一个id选择器。
(在style中设置#id的一些属性，然后在Body中调用id=前面设置的那个名称)。

3，class选择器：也是是“类选择器”，我们可以对“相同的元素”或者不同的元素设置一个class(类名)，然后正对这个
class的元素进行css设置。
class名前面必须加上前缀“.”，否则选择器无法生效，类名前面加上“.”，表明这是一个class选择器
（在style 定义.属性名{属性}，然后在body中调用class="属性名")

一个标签可以同时定义多个class

段落首行缩进的是两个字的间距，要实现这个效果，text-indent的属性值应该是字体font-size的两倍。

如何去除链接标签<a herf...>默认样式下的下划线，用text-decoration:none;就可以去除下面的下划线。
(去除下划线的功能是在CSS中实现的，也就是在style中实现的)
（而网站链接是在body中定义的）

text-decoration:下划线，删除线，顶划线。 text-transform文本大小写
段落首行缩进:text-indent text-align文本水平对齐方式。 vertical-align
Line-height等于行高的时候，文字垂直居中 行高（不是行间距） letter-spacing:px(像素值); 字距 word-spacing 词距

定义词间距，以空格为基准进行调节，如果多个单词被连在一起，则被word-spacing视为一个单词
如果汉字被空格分割，则分割的多个汉字就被视为不同的单词，word-spacing属性此时有效。

DIV中中文会自动换行，英文不会自动换行，在word-wrap:break-word设置就可以

设置一个元素的边框必须要同时设置border-width（边框的宽度）,border-style（边框外观包括实线或者虚线）
边框的颜色 border-color才可以在浏览器显示出来

边框
border-style：solid实线; border-style:dashed虚线;
border-width:1px;
border-style:solid;-------------------------------等于border:1px solid red;是相同的。属性值用空格分开。
border-color:red;

去除边框：border-bottom:0px或者 border-bottom:none

此时color为元素文本颜色。 而background-color为元素背景颜色。

给某个元素设置背景图像，元素要有一定的宽度和高度，背景图片才会显示出来。

background-repeat:no-repeat表示不平铺、repeat为在X轴和Y轴上同时平铺、
repeat-x.向水平方向平铺。repeat-y向垂直方向平铺。

background-position:X Y表示网页的横纵向位置，取值也可以用关键字代替PX

超链接伪类简介：
a:link 定义a元素未访问时的样式。 a:visited 定义a元素访问后的样式
a:hover 定义鼠标经过显示的样式。 a:active 定义鼠标单击激活时的样式
正常使用时只需要a{}与a:hover{}

:hover伪类可以定义任何一个元素在鼠标经过时的样式。

文字环绕效果-float:取值；Left，right；

文字紧紧环绕在图片周围：margin-top，bottom：PX；

列表：
列表项符号：List-style-type:none;去除列表项号

自定义列表项符号：List-style-image：（相对地址或者绝对地址）；由于自带的符号图标不好看，这个可以更改序列号的图标。

表格边框合并：border-collapse:属性值；border-separate;默认值，就是分开的意思。有间隙。
（只需要在table元素中设置border-collapse属性值。没必要在th，td中设置属性。造成代码冗余。这个属性是表格独有的属性，其他地方用不到）

表格边框间距border-spacing:Px;一个值就代表纵向横向同一个值，要是border-spacing:PX PX；分别代表横纵两个值。

表格标题位置：caption-side:top bottom;两个属性值来决定是上下？

只有块元素能设置width和height（也就是独占一行的，div p）
我们可以用display属性将行内元素转换为块元素。display:inline-block;

盒子模型：
border：(边框)，元素边框 margin：（外边距）用于定义页面中元素和元素之间的距离

padding(内边距)用于定义内容与边框之间的距离 content(内容)可以使文字或者图片

正常文档流：块元素独占一行（例如：hr p div）,行内元素相邻就会位于同一行。并且从左到右排列。

脱离文档流：在不改变HTML代码顺序的前提下，通过CSS：浮动和定位，两种方式来使它所显示的位置和文档代码刘顺序不一致。

浮动定位float：left/right;来使文档的位置随心所欲。（浮动布局比较灵活，但不容易控制）

清除浮动clear:both;左右一起清楚。需要哪个标签或者地方清楚，p{clear:both;}

定位布局：position:属性；
固定定位（fixed） 相对定位(relative) 绝对定位(absolute) 静态定位(static)

固定定位(fixed)结合top.bottom. left ,right来设置元素相对浏览器的位置，也就是浏览器的4条边。
相对定位（relative）也是结合上下左右来设置元素位置，相对定位的元素位置是相对于原来的初始位置来设置的。
绝对定位(absolute)绝对定位元素是独立出来的，完全脱离正常文档流。是结合上下左右来设置元素位置。
静态定位(static)如果没有指定元素的position值，那么也就是在默认的情况下，元素是静态定位，也就是Position；static；

暂且来说，在默认的情况下，固定定位元素和绝对定位元素是相对浏览器而言的，而相对定位元素是相对于原来的位置而言的。

css个人随笔，适合新手总结整理的更多相关文章

  1. 适合新手小白的UI学习路线完整版

    UI设计是很多年轻人活着想转行学习的人的新职业目标,越来越多的人看到UI设计良好的就业发展前景,纷纷投入到UI设计的大军中来,想学习UI设计,很多小白并不知道从何开始学起,用什么样的方法去学习,所以今 ...

  2. 适合新手：从零开发一个IM服务端（基于Netty，有完整源码）

    本文由“yuanrw”分享,博客:juejin.im/user/5cefab8451882510eb758606,收录时内容有改动和修订. 0.引言 站长提示:本文适合IM新手阅读,但最好有一定的网络 ...

  3. GitHub 上适合新手的开源项目（Python 篇）

    作者:HelloGitHub-卤蛋 随着 Python 语言的流行,越来越多的人加入到了 Python 的大家庭中.为什么这么多人学 Python ?我要喊出那句话了:"人生苦短,我用 Py ...

  4. 最适合和最不适合新手使用的几款 Linux 发行版

    大多数知名的Linux发行版都属于"比较容易使用"这一类.一些观察人士可能会驳斥这个观点,但事实上,说到Linux,大多数并非从事IT或软件开发工作的人会被最容易的使用体验所吸引. ...

  5. css小随笔（二）与通用样式

    51先在学校HTML5已经有半个多月了,然后这个星期做了一个京东的手机网站,接触到了通用样式,下面以京东的手机站为例 这两个就是京东手机站了的不同的两个板块,因为HTML5仅仅只是学完了基本标签跟cs ...

  6. 哪些CSS是可以被继承的--简单整理

    那些CSS是可以被继承的--简单整理1.文本相关属性是继承的:font-size,font-family,line-height,text-index等2.列表相关属性是继承的:list-style- ...

  7. python环境搭建-requests的简单安装（适合新手）

    安装完python之后,一定要记住安装后的路径.这是我当前的路径. 下面是requests的安装步骤: 我们这里直接用pip安装(这样比较适合新手),新版python自带pip,python3.6.1 ...

  8. 关于富文本编辑器ueditor（jsp版）上传文件到阿里云OSS的简单实例，适合新手

    关于富文本编辑器ueditor(jsp版)上传文件到阿里云OSS的简单实例,适合新手   本人菜鸟一枚,最近公司有需求要用到富文本编辑器,我选择的是百度的ueditor富文本编辑器,闲话不多说,进入正 ...

  9. 适合新手的web开发环境

    学习web开发,环境搭建是必不可少的一个环节.你可以使用wamp一键安装包,或者使用sae.bae.gae这种PaaS平台来部署,或者安装*nix系统在本地部署. 对于一个希望体验LAMP式建站的新手 ...

随机推荐

  1. 【Spring】简单的Spring AOP注解示例

    引入相关包: <properties> <spring.version>3.0.5.RELEASE</spring.version> <aspectj.ver ...

  2. App瘦身

    http://www.zoomfeng.com/blog/ipa-size-thin.html https://github.com/ming1016/SMCheckProject

  3. 续并查集学习笔记——Gang团伙题解

    一言不合先贴题目 Description 在某城市里住着n个人,任何两个认识的人不是朋友就是敌人,而且满足: 1. 我朋友的朋友是我的朋友: 2. 我敌人的敌人是我的朋友: 所有是朋友的人组成一个团伙 ...

  4. Dreamweaver架设网站终极教程

    转自:http://www.cnblogs.com/loveme513/archive/2006/04/03/365969.html 一.定义站点 1. 在任意一个根目录下创建好一个文件夹(我们这里假 ...

  5. 公共交通3D指纹验证系统解决方案

    为了响应国家关于老年人的优待政策,华本研发了退休老人乘公交车指纹认证系统.指纹认证系统不仅方便老人乘坐公交,还能为公共部门减压,杜绝伪造优待证乘坐公交的不法行为. 目前,优待证都是人工检查,缺乏有效的 ...

  6. Openstack+Kubernetes+Docker微服务实践之路--服务发布

    结合上文,我们的服务已经可以正常运行了,但它的访问方式只能通过服务器IP加上端口来访问,如何通过域名的方式来访问到我们服务,本来想使用Kubernetes的Ingress来做,折腾一天感觉比较麻烦,I ...

  7. Spring MVC静态资源处理

    优雅REST风格的资源URL不希望带 .html 或 .do 等后缀.由于早期的Spring MVC不能很好地处理静态资源,所以在web.xml中配置DispatcherServlet的请求映射,往往 ...

  8. 【树莓派】关于tinyproxy问题处理

    一.tinyproxy服务启动问题解决 在配置好树莓派的设备上,发现 tinyproxy 启动时候存在问题,如下图: 经过半天的折腾,后来发现原来是由于异常关机导致临时文件生成错误 解决办法:删除/t ...

  9. pandas处理数据1

    读文件 pd.read_csv('path/to/file.txt',header=0,names='ab',index_col=0) names Columns这个可以不写,制定索引列是第一列,这样 ...

  10. 基于Python的网页文档处理脚本实现

    嵌入式web服务器不同于传统服务器,web需要转换成数组格式保存在flash中,才方便lwip网络接口的调用,最近因为业务需求,需要频繁修改网页,每次的压缩和转换就是个很繁琐的过程,因此我就有了利用所 ...