css基础---->学习html(一)
这里零散的总结一下观看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(一)的更多相关文章
- HTML&CSS基础学习笔记—创建列表
创建一张表格 很多时候我们需要在网页上展示一些数据,使用表格可以很好的来展示数据. 在HTML中<table>标签定义 表格. <table> </table> 添 ...
- CSS基础学习笔记
一. CSS介绍 1. CSS概述:CSS(Cascading Style Sheets)指层叠样式表,极大提高了工作效率. 2. 基础语法: 属性大于1个之后,属性之间用分号隔开 如果大于1个单词, ...
- css基础学习
css(Cascading style sheets):层叠样式表 1.图片替换技术 以下代码表示:点击百度logo的图片就会跳转到百度首页. <style > .baidu{ /*宽高定 ...
- HTML&CSS基础学习笔记1.33-元素选择器
元素选择器 最常见的 CSS 选择器是元素选择器.换句话说,文档的元素就是最基本的选择器: p { text-indent:10px; color:blue; } 什么情况下使用元素选择器,一般我们这 ...
- HTML&CSS基础学习笔记1.32-选择器是什么
选择器是什么 选择器是CSS样式为了定位页面上的任意元素的一种方法. 选择器主要分为:元素标签选择器.通用选择器.类选择器.ID选择器.属性选择器.组合选择器.伪类选择器.伪元素选择器. 先做个了解, ...
- HTML&CSS基础学习笔记1.31-像素和相对长度
像素和相对长度 之前的笔记中,我们提到过用属性width.height来设置图片的尺寸,它们的单元都是”px(像素)”.长度单位总结一下,目前比较常用到px(像素).em.% 百分比,要注意其实这三种 ...
- HTML&CSS基础学习笔记1.30-颜色的表达
颜色的表述 在网页中的颜色设置是非常重要,CSS的属性有字体颜色(color).背景颜色(background-color).边框颜色(border)等,设置颜色的方法也有很多种: 1.英文命令颜色 ...
- HTML&CSS基础学习笔记1.29-灵活地使用样式
灵活的使用样式 使用样式的感觉很棒吧! 刚我们使用的内联样式是给具体的标签加上样式,如果有多个标签的时候,我们用内联样式给标签加样式的时候就需要一个个的加过来,这样就很麻烦. 而如果我们使用内部样式表 ...
- HTML&CSS基础学习笔记1.28-给网页添加一个css样式
CSS是什么? 当HTML配合CSS一起使用时,我们发现页面变得好看了很多.那么CSS到底是什么呢? CSS指层叠样式表 (Cascading Style Sheets),它主要是用于定义HTML标签 ...
- less.css基础学习,陆续更新中
//基础//概念:动态样式语言,有很多语言的特性:变量,函数,运算等 //变量:通过一个简单的@+字母,数字下划线等,但不能以数字开头,不能关键字,保留字等//注意less.css是全局变量,除在函数 ...
随机推荐
- mount -t nfs 不能使用
去年使用一个新的文件系统的时候,发现mount -t nfs ip:/g/ftp ~/mnt -o tcp,nolock 不能使用 一直以为是因为mount 命令更新了,有些用法我不会用,但是刚才发现 ...
- pthread_cond_wait()函数的详解
http://hi.baidu.com/tjuer/item/253cc6d66b921317d90e4483 了解 pthread_cond_wait() 的作用非常重要 -- 它是 POSIX 线 ...
- [LintCode]各位相加
描述: 给出一个非负整数 num,反复的将所有位上的数字相加,直到得到一个一位的整数. 给出 num = 38. 相加的过程如下:3 + 8 = 11,1 + 1 = 2.因为 2 只剩下一个数字,所 ...
- d3js把circle和rect连接在一起
怎么办呢...哎...突然就必须全选中了.... 但是...一不小心想到 在g里面都添加circle和rect 但是根据tpye可以让circle的r为0或者rect的width和height为0,这 ...
- JavaScript操作XML工作记录
JavaScript操作XML (一) JavaScript操作XML是通过XML DOM来完成的.那么什么是XML DOM呢?XML DOM 是: 用于 XML 的标准对象模型 用于 XML 的标准 ...
- GOF23设计模式汇总
转自:http://www.cnblogs.com/zhili/p/DesignPatternSummery.html#3037698 C#设计模式总结 一.引言 经过这段时间对设计模式的学习,自己的 ...
- ADC相关参数之---分辨率和精度
ADC的分辨率被定义为输入信号值的最小变化,这个最小数值变化会改变数字输出值的一个数值.对于一个理想ADC来说,传递函数是一个步宽等于分辨率的阶梯.然而,在具有较高分辨率的系统中(≥16位),传输函数 ...
- u方法传参
<a href="{:U('Del/mldel',array('id'=>$vo['id']))}">删除</a>
- Struts2学习笔记(OGNL表达式)
Struts 2支持以下几种表达式语言: OGNL(Object-Graph Navigation Language),可以方便地操作对象属性的开源表达式语言: JSTL(JSP Standard T ...
- 【转】C#获取电脑客户端IP地址及当前用户名
在C#中获取一台电脑名,IP地址及当前用户名是非常简单,以下是我常用的几种方法: 1. 在ASP.NET中专用属性: 获取服务器电脑名:Page.Server.ManchineName 获取用户信息: ...