这里零散的总结一下观看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. kubernetes 数据持久化

    pod本身是无状态,所以很多有状态的应用,就需要将数据进行持久化. 1:将数据挂在到宿主机.但是pod重启之后有可能到另外一个节点,这样数据虽然不会丢但是还是有可能会找不到 apiVersion: v ...

  2. 课后作业——用lastIndexOf判断是否是字符串的最后一位

    package test; public class Testlianxi { public static void main(String[] args) { //判断fgh是否是字符串的最后一位 ...

  3. linux网口驱动实现(待续)

    驱动位于linux/driver/net下. 1. 寄存器读写 asm/io.h #define __raw_writeb(v,a)   (__chk_io_ptr(a), *(volatile un ...

  4. DataTable使用技巧:DataRowState

    DataGridView:获取 DataRow 对象的状态,共有5个枚举值. Added 该行已添加到 DataRowCollection 中,AcceptChanges 尚未调用. Deleted ...

  5. MVC教程一:MVC简介

    一.概述 1.MVC是一种流行的Web应用架构技术,他把Web应用划分成Model(模型).Controller(控制器)和View(视图)三部分. 2.优点:可测试.可维护 3.MVC是ASP.NE ...

  6. Session和几种状态保持方案理解

    一.术语session 在我的经验里,session这个词被滥用的程度大概仅次于transaction,更加有趣的是transaction与session在某些语境下的含义是相同的. session, ...

  7. English Sentenses【no use】

    1.Sorry if I might sound arrogant or offensive. 2.Any further question? 3.How dare you! 4.Try it if ...

  8. (转)x264 编码流程

    转自:http://alphamailpost.blog.163.com/blog/static/20111808120128111160728/ http://www.usr.cc/thread-5 ...

  9. Why provision Bare Metal

    Here are a few use-cases for bare metal (physical server) provisioning in cloud; there are doubtless ...

  10. Shell 启动java程序

    #!/bin/sh SHELL_PATH=$(cd ")";pwd) echo $SHELL_PATH cd "$SHELL_PATH" CLASSPATH=. ...