css个人随笔,适合新手总结整理
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个人随笔,适合新手总结整理的更多相关文章
- 适合新手小白的UI学习路线完整版
UI设计是很多年轻人活着想转行学习的人的新职业目标,越来越多的人看到UI设计良好的就业发展前景,纷纷投入到UI设计的大军中来,想学习UI设计,很多小白并不知道从何开始学起,用什么样的方法去学习,所以今 ...
- 适合新手:从零开发一个IM服务端(基于Netty,有完整源码)
本文由“yuanrw”分享,博客:juejin.im/user/5cefab8451882510eb758606,收录时内容有改动和修订. 0.引言 站长提示:本文适合IM新手阅读,但最好有一定的网络 ...
- GitHub 上适合新手的开源项目(Python 篇)
作者:HelloGitHub-卤蛋 随着 Python 语言的流行,越来越多的人加入到了 Python 的大家庭中.为什么这么多人学 Python ?我要喊出那句话了:"人生苦短,我用 Py ...
- 最适合和最不适合新手使用的几款 Linux 发行版
大多数知名的Linux发行版都属于"比较容易使用"这一类.一些观察人士可能会驳斥这个观点,但事实上,说到Linux,大多数并非从事IT或软件开发工作的人会被最容易的使用体验所吸引. ...
- css小随笔(二)与通用样式
51先在学校HTML5已经有半个多月了,然后这个星期做了一个京东的手机网站,接触到了通用样式,下面以京东的手机站为例 这两个就是京东手机站了的不同的两个板块,因为HTML5仅仅只是学完了基本标签跟cs ...
- 哪些CSS是可以被继承的--简单整理
那些CSS是可以被继承的--简单整理1.文本相关属性是继承的:font-size,font-family,line-height,text-index等2.列表相关属性是继承的:list-style- ...
- python环境搭建-requests的简单安装(适合新手)
安装完python之后,一定要记住安装后的路径.这是我当前的路径. 下面是requests的安装步骤: 我们这里直接用pip安装(这样比较适合新手),新版python自带pip,python3.6.1 ...
- 关于富文本编辑器ueditor(jsp版)上传文件到阿里云OSS的简单实例,适合新手
关于富文本编辑器ueditor(jsp版)上传文件到阿里云OSS的简单实例,适合新手 本人菜鸟一枚,最近公司有需求要用到富文本编辑器,我选择的是百度的ueditor富文本编辑器,闲话不多说,进入正 ...
- 适合新手的web开发环境
学习web开发,环境搭建是必不可少的一个环节.你可以使用wamp一键安装包,或者使用sae.bae.gae这种PaaS平台来部署,或者安装*nix系统在本地部署. 对于一个希望体验LAMP式建站的新手 ...
随机推荐
- EX14 彩票中奖 (lottery.pas/c/cpp)
[题目描述]小明想试试运气去购买彩票,所以他开始研究彩票大乐透的玩法:超级大乐透是指由购买者从01—35共35个号码中选取5个号码为前区号码,并从01—12共12个号码中选取2个号码为后区号码组合为一 ...
- codeforces 744C Hongcow Buys a Deck of Cards
C. Hongcow Buys a Deck of Cards time limit per test 2 seconds memory limit per test 256 megabytes in ...
- 主流的单元测试工具之-JAVA新特性-Annotation 写作者:组长 梁伟龙
1:什么是Annotation?Annotation,即“@xxx”(如@Before,@After,@Test(timeout=xxx),@ignore),这个单词一般是翻译成元数据,是JAVA的一 ...
- Nginx模块之———— RTMP模块 统计某频道在线观看流的客户数
获得订阅者人数,可以方便地显示观看流的客户数. 查看已经安装好的模块 /usr/local/nginx/sbin/nginx -V 安装从源编译Nginx和Nginx-RTMP所需的工具 sudo a ...
- Kafka是如何实现高吞吐率的
Kafka是如何实现高吞吐率的 原创 2016-02-27 杜亦舒 性能与架构 Kafka是分布式消息系统,需要处理海量的消息,Kafka的设计是把所有的消息都写入速度低容量大的硬盘,以此来换取更强的 ...
- linux建立一个快捷方式,连接到另一个目录
sudo ln -s 源目录 目标快捷方式比如你要在/etc下面建立一个叫LXBC553的快捷方式,指向/home/LXBC,那就是sudo ln -s /home/LXBC /etc/LXBC553
- [求助] win7 x64 封装 出现 Administrator.xxxxx 的问题
[求助] win7 x64 封装 出现 Administrator.xxxxx 的问题 jacky_qu 发表于 2014-9-3 23:34:37 https://www.itsk.com/thre ...
- lua特性纪要
[局部变量] lua的局部变量通过local进行显示声明, 其作用域仅限于声明它的块block.这里的block分为三种类型: 1.控制结构的执行体 2.函数的执行体 3.chunk 比较容易引起混淆 ...
- css学习记录
1 !important 表示此属性需要优先考虑: <head> <title>Page Title</title> <style type=&q ...
- 不使用插件实现对WordPress默认编辑器的增强
四处寻觅无果.无意看了一下wordpress官方的API函数.苍天有眼啊!原来,后台的编辑器可以插入很多增强功能.果断卸载掉CK and SyntaxHighlighter编辑器插件.事实上,Word ...