CSS代码规范：尽量不要在标签内使用样式代码。

　　　　　　.css文档内部声明不换行可以节省内存。

谨记：

常犯的错误是.html文档和.css样式表都写好了，但总会忘记插入样式表。

1.字体的样式

　　​

 2.文本属性

vertical-align:middle/top/bottom;

text-align属性
值 说明
left 把文本排列到左边。默认值：由浏览器决定
right 把文本排列到右边。
center 把文本排列到中间。
justify 实现两端文本对齐效果。

注明属性text-align的使用 text-align:jusetify; /*两端对齐，但是不包括最后一行*/

　　　　　　　　　　　　   text-align-last:juestify; /*包括最后一行两端对齐*/

 <!DOCTYPE html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <title>Title</title>

     <style>

         p{

             width:400px;

             height:400px;

             margin:0 auto;

             text-align: justify;

             text-align-last: justify;

         ;}

     </style>

 </head>

 <body>

 <section>

     <p>这个AI名叫SNAP_R，它以每分钟6.75条消息的速率向800名用户发送钓鱼消息，其中有275名用户成功上钩。相比之下，来自福布斯的专业作家Thomas Fox-Brewster平均每分钟只能产出1.075条消息，总共发送了129名用户，而仅有49名用户被吸引。</p>

 </section>

 </body>

 </html>

效果图：

常使用于新闻页面内。

text-decoration属性

none 　　默认值，定义的标准文本

underline　　设置文本的下划线

overline　　设置文本的上划线

line-through 设置文本的删除线

3.文本阴影

text-shadow：color x-offset y-offset blur-radius;

阴影颜色  X轴位移  Y轴位移  模糊半径

4.超链接

 
伪类名称 含义 示例
a:link 未单击访问时超链接的样式 a:link{color:red;}
a:visited 单击访问后超链接的样式 a:visited{color:red;}
a:hover 鼠标悬浮其上的超链接样式 a:hover{color:red;}
a:active 鼠标单击未释放时超链接的样式  

5.列表样式

　　属性： list-style-type:

　　　　 　list-style-image:

　　　　  list-style-position:

　　　　  list-style:

list-style-type:
值 语法示例
none   无标记符号

list-style-type:none;
disc   实心圆，默认类型

list-style-type:disc;
circle　　空心圆

list-style-type:circle;
square　　实心正方形

list-style-type:square;
decimal　　数字

list-style-type:decimal;

a>若要去除列表上下的结构语法：

li{display:inline-block;}

6.背景图像

语法 background-image：url("path");

背景重复方式 属性background-repeat:值;　　　　　　　　　　　　　　　　　　

　　　　repeat：沿水平线和垂直两个方向平铺

　　　　no-repeat:不平铺，即只显示一次

　　　　repeat-x:只沿水平方向平铺

　　　　repeat-y:只沿垂直方向平铺

背景定位属性 background-position:

 
值 含义
Xpos  Ypos 单位：px  Xpos表示水平位置  Ypos表示垂直位置
X%  Y% 使用百分比表示背景的位置
X、Y方向上的关键词 水平方向的：left、center 、right  |  垂直方向的：top、center、bottom

属性background-size：

 background-size:auto;

 background-size:percentage;/*百分值，按照元素的宽度计算*/

 background-size:cover; /*放大整个image*/

 background-size:contain; /*保持宽高比，缩放至正好定义的区域*/

CSS样式内容的更多相关文章

  1. 使用CSS为内容设定特定的鼠标样式（cursor）介绍

    相信大家都知道我们的鼠标在网页中不同的元素中有不同的显示(例如 a 元素就显示为“箭头指针”),但是其实我们还可以自定义这些有趣的东西哦!今天“畅想资源”就来教大家如何使用CSS为内容设定特定的鼠标样 ...

  2. jq选择器（jq 与 js 互相转换），jq操作css样式 / 文本内容， jq操作类名，jq操作全局属性,jq获取盒子信息,jq获取位置信息

    jq选择器(jq 与 js 互相转换) // 获取所有的页面元素jq对象 $('css3选择器语法'); var $box = $(".box:nth-child(1)"); 获取 ...

  3. div+css隐藏内容样式方法

    div css隐藏内容样式方法     div+css隐藏内容方法 一般情况下,css隐藏的用途,如下: 1.对文本的隐藏 2.隐藏超链接(另类黑链) 3.对统计代码隐藏 4.隐藏超出图片 5.css ...

  4. CSS样式实现溢出超出DIV边框宽度高度的内容自动隐藏方法

    CSS样式实现溢出超出DIV边框宽度高度的内容自动隐藏方法 平时我们布局时候,有的文字内容多了会超过溢出我们限制的高度,有的图片会撑破DIV,让网页错位变乱. 这样我们就需要解决如何使用CSS来超出设 ...

  5. bootstrap课程4 bootstrap的css样式有哪些内容需要注意

    bootstrap课程4 bootstrap的css样式有哪些内容需要注意 一.总结 一句话总结: 1.如何选择产品(框架)的版本? 大版本下的最后一个版本,但是同时又要选择稳定的版本,也就是如果做产 ...

  6. [lodop]css样式after、before添加content内容之前和之后

    css样式可以在内容之前和之后加内容.格式是:css类名:before{content:在之前加的内容}css类名:after{content:在之后加的内容}这种写法在LODOP里直接测试是不行的, ...

  7. CSS样式表及选择器相关内容(一)

    CSS(Cascading Style Sheets)层叠样式表1.CSS级联-CSS层叠:规定在哪个HTML中使用哪个样式. body{ font-size:16px; //body默认字体大小 } ...

  8. 2019-02-15 CSS样式学习——（内容来自mooc北京林业大学web前端开发授课ppt）

    CSS样式的添加方法 行内样式 e.x. 内嵌样式 e.x. 注意内嵌样式写在head标签内: 单独文件(外部式样式表文件) 也是在head标签内插入超链接,sublime+emmet可以用link: ...

  9. css样式加载顺序及覆盖顺序深入理解

    注:内容转载 很多的新手朋友们对css样式加载顺序和覆盖顺序的理解有所偏差,下面用示例为大家详细的介绍下,感兴趣的朋友不要错过 { height: 100%; width: 200; position ...

随机推荐

  1. 同一台PC，配置多个同一存储平台下的Git账号【两个码云账号，配置在同一台PC上】

    问题:配置完 SSH Key, 使用[http地址]拉取代码异常.报一些没有权限的问题. 原因:配置多个gitee账号(码云)后.拉取代码时,应使用~.ssh/config中Host地址,而不是码云给 ...

  2. （Python基础）简单购物车代码

    以下是最简单,最基础的购物车代码,一起学习,一起参考.product_list = [ ('Iphone',5800), ('Mac Pro',15800), ('car',580000), ('co ...

  3. 7.3.5 Tomcat堆溢出分析（1）

    实战Java虚拟机:JVM故障诊断与性能优化>第7章分析Java堆,本章主要介绍了Java堆的分析方法.首先,介绍了几种常见的Java内存溢出现象及解决思路.其次,探讨了java.lang.St ...

  4. ef err

    InvalidCastException: The field of type jcz.DomainModels.Sex must be a string, array or ICollection ...

  5. QPixmap 在非QtCreator环境下无法显示jpg图片

    这几天需要实现在Qt界面中显示jpg图片,于是直接将路径传给QPixmap对象,发现显示不出来. 然而在Qt SDK自带的Demo中却可以正确显示jpg图片,经搜索引擎查找发现,是自己的exe文件缺少 ...

  6. 设计一函数，求整数区间[a,b]和[c,d]的交集

    问题: 设计一函数,求整数区间[a,b]和[c,d]的交集.(c/c++.Java.Javascript.C#.Python)  1.Python: def calcMixed(a,b,c,d): r ...

  7. 注意source folder与folder是不同的，避免404错误

    在整合ssm框架的时候,程序和配置文件都没写错,tomcat也部署成功了,但在访问的时候一直404,web项目自带的index.jap却能正常访问,一直找不到原因,后来发现建立放配置文件的文件夹con ...

  8. 11Linux_sshd_Apache

    1.Linux系统中一切都是文件. 2.配置服务实际上就是在修改配置文件. 3.重启相应服务来加载最新的配置参数. 4.为了保证下次还生效,加入到开机启动项中.

  9. MySql：SELECT 语句（四）通配符的使用

    1. LIKE 操作符 要在搜索子句中使用通配符,必须要使用 LIKE 操作符. 1)百分号通配符 最常用的通配符是百分号(%). % 表示任何字符出现的任意次数.但是 NULL 除外.可以匹配 0 ...

  10. [PHP] 常备的现代 PHP 项目开发准备

    [ Windows 开发环境 ] phpStudy(http://phpstudy.php.cn/) 现在一般选择版本: php7.1 + nginx,常用 curl.openssl 扩展选择打开. ...