CSS样式基础了解
1.css基础语法
CSS样式的出现是为了将内容和表现分离极大的提高了工作效率
内联样式（在 HTML 元素内部）
<p style="margin-left: 10px；margin-right:10px"></p>
<标签名 style="属性:属性值;属性:属性值;" 属性="属性值"></标签名>
内部样式表（位于 <head> 标签内部）
<style type="text/css">
h1
{color: maroon}
h2
{color: blue}
</style>

外部样式表（实现了内容与表现的分离，推荐使用）
先建立外部样式表文件（*.css）使用HTML的link对象
<link href="ceshi.css" rel="stylesheet" type="text/css" />
rel="stylesheet"描述了当前页面与href所指定文档的关系

三、CSS选择器【重点】
1.css基础先择器
①元素选择器（有特殊功能的标签做）
h1{
color: yellow;
}
②类选择器（class）
.a{
background-color: #00ABFF;
}
使用方法：
第一步：使用合适的标签把要修饰的内容标记起来，如下：
<span>Web开发</span>
第二步：使用class="类选择器名称"为标签设置一个类，如下：
<span class="one">Web开发</span>
第三步：设置类选器css样式，如下：
.one{color:red;}
样式层叠
③ID选择器（id）
#b{
background-color: red;
}
Id和class的区别主要在于，在一个文档中【重点】
Id不能重复使用，指一个元素的唯一标识符
Class可以重复使用，指同一类的多个对象
用class表现共性，表示一类带有共同特征的对象，class可以复用
用id作为唯一标识符，同一网页中id不能重复出现
三种基本选择器的组合形态：
元素.{}
元素#{}
④包含选择器
选择所有被E1包含的E2。中间用空格分隔。
语法： E1 E2
#content p{
color: green;
}
⑤选择器分组
将同样的定义应用于多个选择符
语法： 选择器1，选择器2，选择器3
p,h2,h1{
background-color: pink;
}
可以避免重复写代码
⑥子元素选择器
X>Y：子元素选择器(不能跳级)
页面布局常见命名规范
参考：http://wenku.baidu.com/link?url=ZErK6r8GecSTpcrKUfnmW_ks1VhZyvuW9yiUVS83c_40fImZ4ZUG2_nBSA4i-j7tkEXaPdUrdR3_ABc3PYaB2AduDZzzuXa577OQii9zXyS

⑦css高级选择器
通用元素选择器
*{

}
相邻元素选择器
需要选择紧接在另一个元素后的元素，而且二者有相同的父元素，可以使用相邻兄弟选择器
X + Y：X之后的第一个Y类型兄弟元素
X ~ Y：X之后的所有Y类型兄弟元素

⑧伪类【重点】
锚伪类
a:link {color: #FF0000} /* 未访问的链接 */
a:visited {color: #00FF00} /* 已访问的链接 */
a:hover {color: #FF00FF} /* 鼠标移动到链接上 */
a:active {color: #0000FF} /* 选定的链接 */
提示：在 CSS 定义中，a:hover 必须被置于 a:link 和 a:visited 之后，才是有效的。
提示：在 CSS 定义中，a:active 必须被置于 a:hover 之后，才是有效的。

文本伪类（伪元素）伪元素只能用于块级元素。
:first-line用于向文本的首行设置特殊样
:first-letter用于向文本的首字母设置特殊样
:before在元素之前添加内容。
:after在元素之后添加内容。

结构性伪类(什么情况下比较常用)
:first-child 选择器表示的是选择父元素的第一个子元素
:last-child 选择器选择的是选择父元素的最后一个子元素

X:nth-of-type(n) X:nth-child(n)
X:only-of-type X:first-child
X:first-of-type X:last-child
X:last-of-type(n) X:only-child

属性选择器（表单样式设计常用）
input[type=text]{
border-color: red;
}

css以及选择器基础的更多相关文章

  1. 前端基础：CSS样式选择器

    前端基础:CSS样式选择器 CSS概述 CSS是Cascading Style Sheets的简称,中文意思是:层叠样式表,对html标签的渲染和布局.CSS规则由两个主要的部分组成:1.选择器:2. ...

  2. 【CSS简介、基础选择器、字体属性、文本属性、引入方式】前端小抄(2) - Pink老师自学笔记

    [CSS简介.基础选择器.字体属性.文本属性.引入方式]前端小抄(2) 本学习笔记是个人对 Pink 老师课程的总结归纳,转载请注明出处! 一.CSS简介 CSS 的主要使用场景就是布局网页,美化页面 ...

  3. CSS简介，基础选择器，字体属性，文本属性

    欢迎大家去博客冰山一树Sankey,浏览效果更好.直接右上角搜索该标题即可 博客园主页:博客园主页-冰山一树Sankey CSDN主页:CSDN主页-冰山一树Sankey 前端学习:学习地址:黑马程序 ...

  4. CSS的选择器

    <div id="demo"> <div class="inner"> <p><a href="#" ...

  5. css+js+html基础知识总结

    css+js+html基础知识总结 一.CSS相关 1.css的盒子模型:IE盒子模型.标准W3C盒子模型: 2.CSS优先级机制: 选择器的优先权:!important>style(内联样式) ...

  6. CSS概述<选择器总结>

    概述:CSS是指层叠样式表,他是定义如何显示HTML元素,样式表通常存储在样式表中,通常存储在.css文件中,下面对css的选择器进行总结,便大家夯实基础! 1 语法规范: 每个样式规则有两个部分:选 ...

  7. （1） css的核心基础

     css的核心基础 1.css的基本语法在具体使用css之前,请各位兄弟姐妹先思考一个生活中的问题,一般情况下我们是如何描述一个人的呢? 小明{ 民族:汉族: 性格:温柔: 性别:男: 体重:68kg ...

  8. CSS.01 -- 选择器及相关的属性文本、文字、字体、颜色、

    与html相比,Css支持更丰富的文档外观,Css可以为任何元素的文本和背景设置颜色:允许在任何元素外围设置边框:允许改变文本的大小,装饰(如下划线),间隔,甚至可以确定是否显示文本. 什么是CSS? ...

  9. HTML+DIV+CSS+JSweb前端基础

    HTML+DIV+CSS+JSweb前端基础 1.<html>和</html> 标签限定了文档的开始和结束点. 属性: (1)  dir: 文本的显示方向,默认是从左向右 (2 ...

随机推荐

  1. 一个"Median Maintenance"问题

    题目要求: Download the text file here. The goal of this problem is to implement the "Median Mainten ...

  2. mysql生成百万级数量测试数据

    今天因为项目需要,想测试一下读取百万级数量数据的速度如何,无奈数据库没有现成符合要求的数据,网上百度一番有很都不错的文章,但是需要涉及到一些存储过程和用php代码什么的,虽说可以实现,但是感觉另外再弄 ...

  3. SQL Server分页查询方法整理

    SQL Server数据库分页查询一直是SQL Server的短板,闲来无事,想出几种方法,假设有表ARTICLE,字段ID.YEAR...(其他省略),数据53210条(客户真实数据,量不大),分页 ...

  4. Gulp安装流程、使用方法及cmd常用命令导览

    Gulp安装流程.使用方法及CMD常用命令导览 来自前端小白的gulp及周边知识学习总结 一.名词介绍: Npm--node包管理工具 一开始我不理解,包管理工具是什么鬼.后来用到的gulp也好,gu ...

  5. ThinkPhp框架：分页查询和补充框架知识

    上一篇的随笔写的是基本操作,现在可以做一些高级操作,例如有条件的查询数据,有分页的条件查询数据 一.一个条件的查询数据 查询数据自然是先要显示出数据,然后根据条件进行查询数据 (1)显示出表的数据 这 ...

  6. Android帧动画笔记

    创建drawable资源文件,选择animation-list<?xml version="1.0" encoding="utf-8"?><a ...

  7. Laravel安装及环境的配置（XAMPP集成开发环境下）

    Laravel 使用 Composer 来管理代码依赖.所以,在使用 Laravel 之前,请先确认你的电脑上安装了 Composer. 操作系统为win7: 集成开发环境XAMPP: 第一步:安装C ...

  8. OpenStack neutron 环境云主机使用keepalived vip + 给vip绑定浮动IP 步骤及注意事项

    在openstack环境创建的多台云主机配置keepalived作主备,默认情况下无法生效,直接对云主机一张网卡配置两个IP进行测试也是同样结果,因为: 可以看到,port所在的宿主机上iptable ...

  9. luogu P1494 岳麓山上打水 [iddfs]

    题目描述 今天天气好晴朗,处处好风光,好风光!蝴蝶儿忙啊,蜜蜂也忙,信息组的同学们更加忙.最近,由于XX原因,大家不得不到岳麓山去提水.55555555~,好累啊. 信息组有一个容量为q升的大缸,由于 ...

  10. NLP —— 图模型（零）：EM算法简述及简单示例（三硬币模型）

    最近接触了pLSA模型,该模型需要使用期望最大化(Expectation Maximization)算法求解. 本文简述了以下内容: 为什么需要EM算法 EM算法的推导与流程 EM算法的收敛性定理 使 ...