总结一些css的基础知识

㈠css样式

css：cascading style sheets  层叠样式表

css内容和样式相分离，便于修改样式。

㈡css语法

㈢css添加方法

⑴行内添加：放在<body>标签里

⑵内嵌样式：放在<head>标签里

⑶单独文件：在<head>标签里添加<link>标签

⑷css添加方法—优先级

就近原则：行内样式>内嵌样式>链接样式>浏览器默认样式

㈣选择器

⑴标签选择器：此类型选择器样式的名字跟标签同名

⑵类别选择器：用“.”开头来定义，用class属性来进行引用。

⑶ID选择器：用“#”开头来进行定义，用ID属性来进行引用

区别：ID与class的区别是ID具有唯一性，ID唯一引用一次，class可以多次引用

⑷样式的嵌套声明：一个样式的名字，空格隔开，另外一个样式的名字

⑸样式的集体声明：一种样式与另外一种样式都要统一的设置为什么样的样式，中间用逗号隔开，它们的样式被统一起来。

⑹样式的全局声明：所有的样式被统一，用星号“*”作为选择器的名字，通常这样全局的样式，都作为整个网页的默认样式来使用。

⑺混合

㈤css样式---文本（text）

⑴单位

⒈px   像素

2.em  字符（em单位是自动的适应用户所使用的字体的）

3.%   百分比（相对概念，涉及继承关系，子层继承父层的属性值设定）

⑵颜色

1.rgb（x，x，x）   rgb值，每个颜色分量取值0-255

2.rgb（x%，x%，x%）  rgb百分值：0%-100%

3..rgba（x，x，x，x）   a值：0.0完全透明与1.0完全不透明之间

4.#rrggbb     十六进制数    例如：红色：#ff0000或者#f00（去掉重复位）

⑶文本样式

    属性                          描述              取值

1.color                      文本颜色           red：#f00  rgb（255,0,0）

2.letter-spacing        字符间距           2px    -3px

3.line-heigh              行高                 14px    1.5em    120%

4.text-align               对齐                 center（居中对齐），left，right，justify（两端对齐）

5.text-decoration      装饰线             none（无装饰线），overline（文本上方），underline（文本下方）

                                                        line-through（装饰线作为删除线贯穿文本之中）

6.text-indent            首行缩进          2em

注意以下几点：

1.利用.line-heigh垂直居中：将.line-heigh属性的取值跟元素heigh的取值设置为相等

2.水平方向对齐方式用text-align  ，如下图所示

3.在超链接样式的设置使用.text-decoration：none这个属性值可以去掉超链接的下划线，如下图所示

㈥字体：font

    属性                          描述

1.font                  在一个声明中设置所有的字体属性        font：bold    18px    幼圆

2.font -family       字体系列       font-family：“Hiragino Sans GB” ,“Microsoft YaHei”，sans-serif；

3.font-size           字号              14px    120%

4.font-style          斜体              italic

5.font-weight       粗体              bold

*font属性简化的使用方法

font：斜体   粗体  字号/行高   字体

font：italic   bold   16px/1.5em  ＇宋体＇

希望有所帮助。

CSS样式，语法，添加方法，文本，字体的更多相关文章

  1. 常用的CSS缩写语法一些方法小结

    使用缩写可以帮助减少你CSS文件的大小,更加容易阅读.css缩写的主要规则如下: 颜色 16进制的色彩值,如果每两位的值相同,可以缩写一半,例如: #000000可以缩写为#000;#336699可以 ...

  2. 对于一些css样式的巧妙方法进行总结。

    针对之前遇到过的一些特殊样式的实现,我今天做个总结,目的有二:一是将这些方法记录下来,以便将来需要用到时查找使用.二为将这些大神们智慧的结晶发扬光大,让广大前端程序猿们能够少走弯路.此贴为更新帖,以后 ...

  3. css样式 -- 表格不会因为字体过长导致字体溢出的问题

    常常碰到因为表格大小就麽大了,字体过长会爆炸溢出的问题,我们后端就用这个可以了,溢出的可以省略号 ... 代替好了. /* 在表格css样式加上这三个就可以了 效果就会变成 “abc...” */ { ...

  4. css 样式引入的方法 link 与import的区别

    <link> 元素所参考的样式用户可以自由的选择加以改变,而导入的样式表单就自动的与剩下的样式表融合在一起了 CSS与HTML文档结合的4中方法:1 使用<link>元素链接到 ...

  5. CSS样式表之常用文本属性

    断更了两周了,因为纠结之后在学java啦,但是还是要把学过的前端知识更完 以下的一些文本属性是CSS最常用的属性: [长度单位]:px(像素) [颜色单位]: 十六进制:#ffffff 分别对应红绿蓝 ...

  6. css样式中如何设置中文字体？

    代码如下: .selector{ font-family: SimHei,"微软雅黑",sans-serif; }  注意:加上中文名“微软雅黑”是为了兼容opera浏览器,中文字 ...

  7. 使用scss为css样式自动添加浏览器前缀

    当一个浏览器实现一个新的属性.值或者选择器,而这个特征还不是处于候选推荐标准状态的时候,这属性的前面会添加一个前缀以便于它的渲染引擎识别. 浏览器使用前缀来尝试一些新属性.值和选择器,即使他们还没有最 ...

  8. css样式设置高度不定文本垂直居中

    使用css实现文本垂直居中,对于支持display: table的浏览器来说,是比较容易实现的,只需要对外层div设置为table,内层div设置为table-cell,并设置文本垂直居中即可.但对于 ...

  9. CSS样式之背景、文本

    一.背景     1.背景颜色用background-color属性,例如:body{background-color:red}     2.用图像做背景用background-image属性,例如b ...

  10. PHP分帧后台模板页面css样式,js引入方法

    一,首先把下载好的分帧后台模板放到对应的目录中,HTML显示页面放到View目录中,CSS和JS.img图片等公共资源放到include目录中 二.然后开始准备更改CSS和JS , img路径操作:( ...

随机推荐

  1. ELK电子书籍

    Elasticsearch in Action(英文版).pdfElasticsearch实战 in action(中文版).pdfElasticsearch技术解析与实战.pdfElasticsea ...

  2. Linux Exploit系列之二 整数溢出

    整数溢出 虚拟机安装:Ubuntu 12.04(x86) 什么是整数溢出? 存储大于最大支持值的值称为整数溢出.整数溢出本身不会导致任意代码执行,但整数溢出可能会导致堆栈溢出或堆溢出,这可能导致任意代 ...

  3. 问题:tomcat启动后，可以访问主页面，但是无法访问dubbo-admin

    原因分析: 直接查看logs中的日志文件,发现一行 [Catalina-utility-1] org.apache.catalina.startup.HostConfig.undeploy Undep ...

  4. mongodb的简单操作记录

    由于项目上需要对mongodb进行监控,所以需要先熟悉下什么是mongobd以及mongodb的简单操作 mongodb的安装: curl -O https://fastdl.mongodb.org/ ...

  5. SQL SERVER 中 sp_rename 用法

    转自:http://www.cnblogs.com/no7dw/archive/2010/03/04/1678287.html 因需求变更要改表的列名,平常都是跑到Enterprise manager ...

  6. win7-32位安装mysql-5.7.27

    下载 https://dev.mysql.com/downloads/mysql/5.7.html#downloads 参考链接 https://blog.csdn.net/qq_41307443/a ...

  7. 运维都该会的Socket知识！

    本篇博客转自赵班长 所有运维都会的Socket知识!!! 原创: 赵班长 新运维社区 什么是Socket? 大家都用电脑上网,当我们访问运维社区https://www.unixhot.com的时候,我 ...

  8. linux主机之间的SSH链接

    一.什么是SSH连接 SSH为Secyre Shell的缩写,SSH 为建立在应用层基础上的安全协议.SSH 是目前较可靠,专为远程登录会话和其他网络服务提供安全性的协议.且SSH连接可以通过多种平台 ...

  9. 织梦网站dedecms防止挂马的思路

    DedeCms做为国内使用最为广泛使用人数最多的CMS之一,经常爆出漏洞,每个漏洞的爆出,影响都是一大片,轻则被人挂广告.弹框,重则服务器成为肉机,宝贵数据丢失.那么有什么办法可以提高DedeCms的 ...

  10. 关于scanf一个变量的覆盖问题

    假如你为了省空间,在scanf一个很长的字符串s后,又重复scanf 字符串s, 但是后面的s比前面的s短,那么在s后面一定有没覆盖的原字符串的字符: 那么在取字符串长度时会不会还是原来的s长度而不是 ...