这里零散的总结一下观看css权威指南书的知识。生命中的诸多告别,比不辞而别更让人难过的,是说一句再见,就再也没见过。

一、首字母与首行的伪类

<dvi>
<p>I love you.<br>Hello World</p>
<p>I love you.</p>
</dvi>

css的代码如下:

p:first-letter {
color: red;
}
p:first-line {
color: blue;
}

运行的效果如下:

二、选择器的特殊性

选择器的特殊性由选择器本身的组件确定,表述为4个部分,如:,,,。
、对于选择器中给定各个ID属性值,加0,,,。
、对于选择器中给定的各个类属性值、属性选择或伪类,加0,,,。
、对于选择器中给定的各个元素和伪元素,加0,,,。
、结合符和通配选择器对特殊性没有任何贡献。

这个可以参考博客:http://www.cnblogs.com/xyzhanjiang/p/3653128.html

三、伪类after和before的使用

这个具体参考博客: http://www.cnblogs.com/laden666666/p/6089880.html

对于颜色中的#F00,如果只有三位的话。浏览器会取每一位,并将其复制成两位。如#F01等价于#FF0011。

四、css中长度单位

  • 绝对长度单位:in、cm、mm、pt、pc
  • 相对长度单位:em、ex、px。

在css中,1em定义为一种给定字体的font-size值。如果一个元素的font-size为14px,那么对于该元素,1em就等于14px。

<h1 style="font-size: 24px;">Hello World H1</h1>
<h2 style="font-size: 16px;">World Hello H2</h2>
<p style="font-size: 8px;">Hello World P</p>

添加css的样式如下:

h1, h2, p {
margin-left: 1em;
}

运行的效果如下:h1,h2,p的左边距分别为24px,16px,8px。

一般来说,px不用来设置字体,设置图像的大小和边框或定位用px比较合适。

五、div中的文字居中

html的代码如下

<div class="radius">Hello World</div>

css的代码如下:line-height和height设置成一样。

.radius {
background-color: orange;
border-radius: 5px;
height: 100px;
width: 200px;
text-align: center;
line-height: 100px;
}

运行的效果如下:使用border-radius,即使是方形的图片也可以显示为圆角的效果。

六、根据子元素条件设置父元素css是不可行的

  比如,现在有这样的需求:我想让p标签下面的图片居中显示,这样比较好看。我的第一反应是否根据img标签是p标签的子元素而设置p标签的css样式:text-align='center'。目前好像这种方式css好像还不支持。如果可行的话,感觉也会很多问题。浏览器顺序渲染的话,读取到img的时候,还要重新追溯前面的是否p标签。这样页面又要重新渲染一次,很影响效率。直接给p标签定义class就行了。

<p class="img_center">
<img src="http://images2017.cnblogs.com/blog/****.png" alt="">  
<img src="http://images2017.cnblogs.com/blog/****.png" alt="">
</p>

友情链接

css基础---->学习html(一)的更多相关文章

  1. HTML&CSS基础学习笔记—创建列表

    创建一张表格 很多时候我们需要在网页上展示一些数据,使用表格可以很好的来展示数据. 在HTML中<table>标签定义 表格. <table> </table> 添 ...

  2. CSS基础学习笔记

    一. CSS介绍 1. CSS概述:CSS(Cascading Style Sheets)指层叠样式表,极大提高了工作效率. 2. 基础语法: 属性大于1个之后,属性之间用分号隔开 如果大于1个单词, ...

  3. css基础学习

    css(Cascading style sheets):层叠样式表 1.图片替换技术 以下代码表示:点击百度logo的图片就会跳转到百度首页. <style > .baidu{ /*宽高定 ...

  4. HTML&CSS基础学习笔记1.33-元素选择器

    元素选择器 最常见的 CSS 选择器是元素选择器.换句话说,文档的元素就是最基本的选择器: p { text-indent:10px; color:blue; } 什么情况下使用元素选择器,一般我们这 ...

  5. HTML&CSS基础学习笔记1.32-选择器是什么

    选择器是什么 选择器是CSS样式为了定位页面上的任意元素的一种方法. 选择器主要分为:元素标签选择器.通用选择器.类选择器.ID选择器.属性选择器.组合选择器.伪类选择器.伪元素选择器. 先做个了解, ...

  6. HTML&CSS基础学习笔记1.31-像素和相对长度

    像素和相对长度 之前的笔记中,我们提到过用属性width.height来设置图片的尺寸,它们的单元都是”px(像素)”.长度单位总结一下,目前比较常用到px(像素).em.% 百分比,要注意其实这三种 ...

  7. HTML&CSS基础学习笔记1.30-颜色的表达

    颜色的表述 在网页中的颜色设置是非常重要,CSS的属性有字体颜色(color).背景颜色(background-color).边框颜色(border)等,设置颜色的方法也有很多种: 1.英文命令颜色 ...

  8. HTML&CSS基础学习笔记1.29-灵活地使用样式

    灵活的使用样式 使用样式的感觉很棒吧! 刚我们使用的内联样式是给具体的标签加上样式,如果有多个标签的时候,我们用内联样式给标签加样式的时候就需要一个个的加过来,这样就很麻烦. 而如果我们使用内部样式表 ...

  9. HTML&CSS基础学习笔记1.28-给网页添加一个css样式

    CSS是什么? 当HTML配合CSS一起使用时,我们发现页面变得好看了很多.那么CSS到底是什么呢? CSS指层叠样式表 (Cascading Style Sheets),它主要是用于定义HTML标签 ...

  10. less.css基础学习,陆续更新中

    //基础//概念:动态样式语言,有很多语言的特性:变量,函数,运算等 //变量:通过一个简单的@+字母,数字下划线等,但不能以数字开头,不能关键字,保留字等//注意less.css是全局变量,除在函数 ...

随机推荐

  1. mysql 2013错误解决

    今天,莫名其妙的来了个mysql 2013错误,导致无法登陆mysql gui工具,而且dos也进不去,提示ping 127.0.0.1,百度+google后: 这是在使用 mysql 的过程中,困扰 ...

  2. SpringMVC @ModelAttribute 详解

    [@Controller]4 详解@ModelAttribute http://blog.sina.com.cn/s/blog_6d3c1ec601017q4p.html A.@ModelAttrib ...

  3. hBase官方文档以及HBase基础操作封装类

    HBase 官方文档 0.97 http://abloz.com/hbase/book.html HBase基本操作封装类(以课堂爬虫为例) package cn.crxy.spider.utils; ...

  4. vector 排序

    #include <vector> #include <algorithm> 一.vector保存的是基础数据类型(int.char.float等) vector<int ...

  5. C++ 程序可以定义为对象的集合

    C++ 基本语法C++ 程序可以定义为对象的集合,这些对象通过调用彼此的方法进行交互.现在让我们简要地看一下什么是类.对象,方法.即时变量. 对象 - 对象具有状态和行为.例如:一只狗的状态 - 颜色 ...

  6. Xenocode Postbuild 2010 for .NET 混淆工具的详细使用步骤【转】

    1,首先我们需要去下载这个工具去,我这里倒是有一个下载的网址,已经被破解了,而且有序列号 http://download.csdn.net/tag/Xenocode+Postbuild+2010+fo ...

  7. 【转载】ASP.NET Core 中间件详解及项目实战

    前言 在上篇文章主要介绍了DotNetCore项目状况,本篇文章是我们在开发自己的项目中实际使用的,比较贴合实际应用,算是对中间件的一个深入使用了,不是简单的Hello World,如果你觉得本篇文章 ...

  8. MindManager篇

    MindManager:新建脑图 MindManager:大纲视图(批阅文档结构) MindManager:导出为其他格式 MindManager:插入基本插入主题.备注,标记等) MindManag ...

  9. pyqt声音输入

    参考文档: http://blog.csdn.net/jdh99/article/details/39525451 http://blog.csdn.net/jdh99/article/details ...

  10. 【Java NIO的深入研究1】缓冲区

    缓冲区 传统的流和通道的对比 流 通道 慢 快 处理简单 处理复杂 单字节的传输 一块数据的传输 - Java.io.*已经重新写过 - 是对流的模拟 单向的 双向的 可直接访问 必须通过Buffer ...