前端学习(三)css选择器(笔记)
字体样式:
color:red;
font-size:12px;
font-weight:bold/normal;
font-style:italic/normal;
font-family:""
文本样式:
text-indent:2em;
text-decoration:none/line-through/underline/overline;
text-align:left/center/right;
line-height:200px;
其他的样式:
width:100px;
height:100px;
border:1px solid/dotted/dashed red;
background-image:url(图片路径);
background-repeat:no-repeat;
background-position:10px 10px;
background-color:red;
background:url(图片路径) no-repeat 10px 10px red;
===================================================
继承:
1.只和文字相关
2.子级继承父级的字体样式
注意:
有默认样式的标签不继承父级的该默认样式
有color默认样式的a不继承父级的color样式
----如果非要修改a的默认样式,就在我a本身上添加修改!
===============================================
html注释:
<!-- 被注释的内容 -->
css注释:
/* 样式内容 */
--------------------------------------------
提取行间样式:
就是把行间样式写成内联样式
行间:在标签里面写属性style
内联:在head标签里面写一个标签<style>
选择器:
标签选择器 p
类选择器 class=“p1” .p1
注意:
1.一个标签可以有多个class
2.所有的标签的class名可以重复
id选择器 id=“pp1” #pp1
---独一无二!
注意:
1.一个标签只能有一个id名
2.所有的标签的id名不能重复
3.最好不要用id选择器来书写样式
4.id是留给js来获取写特效的
优先级:
id > class > 标签
这些选择器可以混合使用!
嵌套选择器:
.p1 span{}
<人></人>
<人 class="张三"></人>
<人></人>
<人 class="张三"></人>
<人></人>
<人 class="张三" id="142034503243409"></人>
群组选择器:
.p1 div,p{ color:red;}
前提是div和p的样式是一样的!!!
-------------------------------------------------
伪类选择器: 写法:div:XXX
.p1:hover{}
#p1:hover{}
a 全部兼容
a:link{ color:yellow;}--未访问之前
a:hover{ color:red;}----鼠标移入时
a:active{ color:green;}---点击时
a:visited{ color:#000;}---访问之后
注意:
页面上面可以点击的文字变色用的就是a:hover
W3C规范:lv ha
a:link{ color:yellow;}--未访问之前
a:visited{ color:#000;}---访问之后
a:hover{ color:red;}----鼠标移入时
a:active{ color:green;}---点击时
================================================
优先级:
id > class > 标签
100 10 1
嵌套选择器:
#p1{}
100
.p1 span{}
10+1=11
#box .p1 span{}
100+10+1=111
新的优先级:
行间样式 id class 标签 默认样式
*(通配符-指代所有标签)
行间样式 > id > class > 标签 > * > 默认样式
===================================================
认知一下所学过的标签:
标签类型
块标签(元素):
div p h
特性:
1.独占一行
2.支持设置宽高
3.不受空格影响
行内标签(元素):
span b i em strong a
特性:
1.共处一行
2.不支持设置宽高
3.受空格影响
包含关系:
1.块标签可以包所有标签!
注意:
1.div可以包含自己
2.p不能包含块标签
2.行内标签只能包行内元素!
注意:
a标签可以包含所有标签!
------------------------------
行内和块可以互换!
display:block; --可以把行内变成块!
display:inline;---可以把块变成行内!
注意:
通过转换以后的标签不会改变:包含关系!
===================================================
第三种类型:
行内块!display:inline-block;
(包含行内特性还有块特性)
1.可以设置宽高
2.可以共处一行
3.受空格影响
img与身巨来就是这样的类型
在页面中只要有块元素排在一行,我不建议你用行内快!
(浮动!)
==================================================
cursor:pointer;---可以把鼠标模拟手型
===========================================
新标签:
组合使用!
无序列表:
<ul>
<li></li>
</ul>
注意:
1.ul和li都是块标签
2.ul里面只可以放li
3.li的最近父级只可以是ul
4.li可以放任何标签
5.默认每一个li前面有个小圆点(默认样式)
---取消默认:list-style:none;
有序列表:
<ol>
<li></li>
</ol>
前端学习(三)css选择器(笔记)的更多相关文章
- 前端学习:JS(面向对象)代码笔记
前端学习:JS(面向对象)代码笔记 前端学习:JS面向对象知识学习(图解) 创建类和对象 创建对象方式1调用Object函数 <body> </body> <script ...
- 前端学习:CSS的学习总结(图解)
前端学习:CSS的学习总结(图解) CSS代码笔记 CSS简介 css的引入方式和书写规范 CSS选择器 CSS属性 CSS盒子模型 CSS的定位
- 转:CSS选择器笔记
作者: 阮一峰 日期: 2009年3月12日 去年我学jQuery的时候,曾经做过一点选择器(selector)的笔记. 这几天拿出来看了一下,发现很多都忘记了.所以,我决定把它们贴在这里,方便以后查 ...
- 【转】CSS选择器笔记
作者: 阮一峰 日期: 2009年3月12日 来源:http://www.ruanyifeng.com/blog/2009/03/css_selectors.html 去年我学jQuery的时候,曾经 ...
- 前端学习(3)-CSS
一 CSS CSS是Cascading Style Sheets的缩写,层叠样式表,用来控制网页数据的显示,可以使网页的显示与数据内容分离. 二 引入方式 (1)行内式:在标记的style属性中设置C ...
- jQuery 顺便学习下CSS选择器 奇偶匹配nth-child(even)
今天学习jQuery,看到nth-child(even)用法,特意找了下这个选择器的用法,在CSS3标准中,用法很强大. 对此,我把CSS3标准中nth-child()用法大致介绍下: CSS3伪类选 ...
- 前端学习之CSS
CSS介绍 CSS(Cascading Style Sheet, 层叠样式表)定义如何显示HTML元素, 给HTML设置样式, 让它更加美观. 当浏览器读到一个样式表, 它就会按照这个样式表来对文档进 ...
- 学习《CSS选择器Level-4》不完全版
1 概述 1.1 前言 选择器是CSS的核心组件.本文依据W3C的Selectors Level 4规范,概括总结了Level1-Level4中绝大多数的选择器,并做了简单的语法说明及示例演示.希望对 ...
- 前端学习 之 CSS(一)
一:什么是 CSS? ·CSS 指层叠样式表 (Cascading Style Sheets) ·样式定义如何显示 HTML 元素 ·样式通常存储在样式表中 ·把样式添加到 HTML 4.0 中,是为 ...
- 前端学习之--CSS
CSS 常用帮助文档 CSS:被用来同时控制多重网页的样式和布局.HTML页面中CSS样式的写法有3种: 1:标签中写入 <body style='margin o auto;'> 2:h ...
随机推荐
- Linux操作练习
打印显示当前时间,格式是:20181209211008 [root@Centos7 ~]#date "+%Y%m%d%H%M%S" 实现晚上20:30自动关机 [root@Cent ...
- 如何加快Vue项目的开发速度
如何加快Vue项目的开发速度 本文摘自奇舞周刊,侵权删. 现如今的开发,比如内部使用的管理平台这种项目大都时间比较仓促.实际上来说,在使用了webpack + vue 这一套来开发的话已经大大了提高了 ...
- Spring Boot和Spring Cloud学习资源推荐
Spring Boot和Spring Cloud学习资源推荐 比较好的学习资源,分享一下. 1.Spring Boot官方文档:http://projects.spring.io/spring-b ...
- Springboot解决使用@Scheduled创建任务时无法在同一时间执行多个任务的BUG
1.在启动类使用 @SpringBootApplication @EnableJpaRepositories(repositoryFactoryBeanClass = MyRepositoryFact ...
- SQL 内部连接
内部链接INNER JOIN关键字选择两个表中具有匹配值的记录. SQL INNER JOIN 语法 SELECT column_name(s) FROM table1 INNER JOIN tabl ...
- 分布式存储Ceph之PG状态详解
https://www.jianshu.com/p/36c2d5682d87 1. PG介绍 继上次分享的<Ceph介绍及原理架构分享>,这次主要来分享Ceph中的PG各种状态详解,PG是 ...
- OC学习篇之---谓词(NSPredicate)
在前一篇文章中我们介绍了OC中一个重要技术通知:http://blog.csdn.net/jiangwei0910410003/article/details/41923401,今天我们在来看一下OC ...
- String Algorithm Summary - 1
目录 Suffix Array Summay 单个字符串问题 两个字符串问题 多个字符串问题 AC-Automaton Summary 求长度为n(2e9)不包含给定字符串的合法串个数 包含至少一个词 ...
- 54、tensorflow手写识别的高级版本
''' Created on 2017年3月4日 @author: weizhen ''' import tensorflow as tf def weight_variable(shape): in ...
- Celery 'Getting Started' not able to retrieve results; always pending
参考 根据Celery的官方文档,当使用windows 10 64-bit, Python 2.7,Erlang 64-bit binary, RabbitMQ server and celery r ...