- CSS 文本格式 11-25
- 百度蜘蛛爬虫不来抓取你的网站是有原因的?(小徐seo 11-25
- CSS background-color 属性 11-25
- will-change优化CSS性能 11-25
- css定位 11-25
- css基础——css代码规范 11-25
- css从入门到放弃(2)——css类选择器 11-25
- 第六章——css部分:基本属性与CSS 11-25
- 层叠样式表CSS创始人讲述CSS的未来和挑战 11-25
- CSS table-layout 属性 11-25
CSS 文本格式
发布者: superzhang | 发布时间:2017-11-25文本格式
This text is styled with some of the text formatting properties. The heading uses the text-align, text-transform, and color properties. The paragraph is indented, aligned, and the space between characters is specified. The underline is removed from the "文本格式" link.
文本颜色
颜色属性被用来设置文字的颜色。
颜色是通过CSS最经常的指定:
十六进制值 - 如: #FF0000
一个RGB值 - 如: RGB(255,0,0)
颜色的名称 - 如: red
参阅 CSS 颜色值 查看完整的颜色值。
一个网页的背景颜色是指在主体内的选择:
实例
body {color:blue;}
h1 {color:#00ff00;}
h2 {color:rgb(255,0,0);}
1、站点响应速度不够快
网页的大小会影响抓取,百度建议网页的大小在1M以内,当然类似大的门户网站另说。代码质量、机器的性能及带宽也是影响抓取的因素。
2、网站自身的质量不高
网站的前台模板构造,使用更适合搜索引擎的div+css布局,精简代码,提高网页打开速度。网站的基础是建立在内容之上的,网站必需事先要设计好,有一定的内容,最好是原创的程序,采集的数据会对站点有影响!
3、站点安全技术不靠谱
那些经常被黑被篡改的网站,证明自身的安全技术非常薄弱。一般被黑有常见几种情况,一种是主域被黑,一种是标题被篡改,还有一种是在页面里面加 了很多的外链。一般主域被黑就是被劫
CSS background-color 属性
发布者: superzhang | 发布时间:2017-11-25实例
设置不同元素的背景色:
body
{
background-color:yellow;
}
h1
{
background-color:#00ff00;
}
p
{
background-color:rgb(255,0,255);
}
标签定义及使用说明
background-color属性设置一个元素的背景颜色。
元素的背景是元素的总大小,包括填充和边界(但不包括边距)。
默认值:transparent继承:no版本:CSS1JavaScript 语法:objectobject.style.backgroundColor="#00FF00"will-change优化CSS性能
发布者: superzhang | 发布时间:2017-11-25will-change属性通过告诉浏览器什么属性、什么元素将会发生变化,可以对这些操作进行可能性的优化,由此提高CSS动画的执行效率。
这个属性可以有4个值:
auto: 实行标准浏览器优化。
scroll-position: 指明元素的滚动位置将会出现动画变化,浏览器应该为滚动视窗内容的不可见部分事先做好准备。
contents: 指明元素的内容将会发生变化,浏览器不要缓存它们的内容。
<custom-ident>: 指明will-change实施的目标属性,比如transform 或 opacity。
如果想通知浏览器会发生一个transform方面的变化,可以这样写:
.element {will-change: transform;}我们还可以指定多个值,用逗号分隔,例如:
.element {will-change: transform, opacity;}然而,千万不要过度使用will-change属性,否则,事与愿违,页面的执行效率会降低,推荐的做法是当一个元素或属性发生变化时打开will-change,变化完成之后关闭它。
-------------------------------------
www.qieban.cn 专业
css定位
发布者: superzhang | 发布时间:2017-11-25css定位及z-index的使用:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>css定位</title>
<style>
/*z-index数越大越靠顶层,数越小越靠底层*/
#div1{
width:200px;
height:200px;
background: rebeccapurple;
position:absolute;
top:20px;
z-index: 2;
}
#div2{
width:200px;
height:200px;
background:black;
position:relative;
left:20px;
z-index: 1;
}
#div3{
width:200px;
height:200px;
css基础——css代码规范
发布者: superzhang | 发布时间:2017-11-25CSS代码规范
1.使用Reset但并非全局Reset
全局Reset不仅仅因为它是缓慢和低效率的方法,而且还会导致一些不必要的元素也重置了外边距和内边距。
*{ margin:0; padding:0; }
2.良好的命名规范
ID和class的命名尽可能短,并符合语义。多个单词的拼接用 '-' 符号链接,尽量使用小写字母。
3.代码缩写
CSS代码缩写可以提高你写代码的速度,精简你的代码量。
li{ font-family:Arial, Helvetica, sans-serif; font-size: 1.2em; line-height: 1.4em; padding-top:5px; padding-bottom:10px; padding-left:5px;}
可以缩写成li{ font: 1.2em/1.4em Arial, Helvetica, sans-serif; padding:5px 0 10px 5px;}
4.利用CSS继承
如果页面中父元素的多个子元素使用相同的样式,那最好把他们相同的样式定义在其父元素上,让它们继承这些CSS样式。这样你可以很好的维护你的代码,并且还可以减少代码量。那么本来这样的代码:
css从入门到放弃(2)——css类选择器
发布者: superzhang | 发布时间:2017-11-25上一节css课程讲了写标签的样式的方法。
是通过
<style type="text/css">
div{
}
</style>
这样的写法来对网页中所有的div标签中的内容来规定样式。
但是这样写有个缺点,就是样式太单一了。假如我想让网页上第一个div标签中显示样式1,然第二个div标签中显示样式2,应该怎么完成呢?
这就需要用到类选择器了,通俗一点讲就是建立一个名称,里面存储着一些样式,然后那个标签需要用到这个样式就在标签中调用这个样式。
看代码 特别注意 类名必须为字母不能为纯数字,或者数字开头
在这段代码中,我们定义了box和miss两个样式类,里面分别储存了一些样式
接下来我们尝试在标签中调用这两个样式
第六章——css部分:基本属性与CSS
发布者: superzhang | 发布时间:2017-11-25一、标签属性与样式
1、网页内容根据想要在作用选择对应在标签
2、找到对应在标签,敲空格看提示,选择对应在单词(或style)来描述该标签。
直接能够敲的出来我们成为属性(attribute),类似于字体在color等。
敲不出来的,称为细节,确切的说叫样式Style。
<font size="+1" style="font-size:10px;">重蔚自留地</font>
TIPS:样式比属性更能精确、多样的控制标签的表现形式
二、CSS介绍:
Cascading [Kæs'keɪdɪŋ] Style Sheet,层叠样式表。
三、选择器:
1、标签选择器
控制对应的标签,通过标签的关键字。
<font>测试文字</font>
<font>abc</font>
<
层叠样式表CSS创始人讲述CSS的未来和挑战
发布者: superzhang | 发布时间:2017-11-25以下来自CSS的创始人,现任W3C CSS标准的制定者 Bert Bos 2016年12月17日发表在CSS诞生20周年上的展望文章,全文翻译。
https://www.w3.org/Style/CSS20/challenges.html
CSS的挑战从现在起的五年,或甚至二十年后的CSS看起来将是怎样的?会有更好的样式表语言吗?会不会有一个比HTML + CSS更好的语言用于创建GUI?不好说。但CSS有一些差距,有一天将必须填补,由CSS本身或其继任者。这里有一些:
Page templates 页面模板
Punctuation, or: semantic vs typographic mark-up 标点,或:语义与印刷标记
Copy-fitting 复制配合
HTML5's details element HTML5的details元素
我计划在一年中更新此页面,以便在2017年12月17日之前,它可以作为CSS(或其后续...)的计划。
Page templates页面模板一个示例是页面模板。应该可以在页面上指定多个区域,每个区域都获得某种内容。这可以在单个,滚动页面上或在分页呈现中的页面之一上。这些区域可以与虚拟网格对齐,或任意放置(虽然也可以是网格,只是不规则的网格)
CSS table-layout 属性
发布者: superzhang | 发布时间:2017-11-25实例
设置表格的布局算法:
table
{
table-layout:fixed;
}
属性定义及使用说明
table-layout属性为表设置表格布局算法。
默认值:auto继承:no版本:CSS2JavaScript 语法:object.style.tableLayout="fixed"浏览器支持
