css选择器
 
 css与html的关系
 
css以html为基础
css主要设置的就是html标签中的属性样式，css进行网页布局。
 
css语法
选择器{属性：值,属性：值}
 
css选择器
 
基本选择器

*{margin:; padding:}网页中所以的标配都可以用

p{ font-size:2px }标签选择器

.input{background：#ffo}

p.info{background:red} p下面类名是info的标签

#footer{ background:red; }

p#info{ background:red; }p下面id是#info的标签

多元素选择器

div,p{ color:#f00 }多元素选择器

ul li{ display:inline;}后代选择器

ul>li{ displa:inline; }子元素选择器

div+p{ color:#f00;}毗邻元素选择器

属性选择器

E[att]

<style>

  div[title]{ color:red }

</style>

<div title="哈哈"></div>

<div class="acb"></div>

命中第一个div，
E[att=val]

<style>

  div[class*="b"]{ color:red }

  input[type="text"]{ foot:12px; }

</style>

命中所有div，因为匹配到了class属性，属性值都包含了b

<div class="abc"></div>

<div class="acb"></div>

只匹配第一个input

<input type="text" name="Name"/>

<input type="button" name="Name"/>

伪类选择器

p:frist-child{ font:12px } 匹配父元素第一个子元素
a:link{ color:red; }/* 未被访问的链接 */

a:visited{color:red }/* 已被访问的链接 */

a:hover{ color:red;}/* 鼠标指针移动到链接上 */

a:active{ color: red;}/* 正在被点击的链接 */
style type="text/css">

  input[type=text]:focus  { background:red; color:#fff}

</style>

<body>

   <input type="text" value="skss" />

</body>

匹配获得当前焦点的元素
<style>

  p:before{ content:'台词'}；

</style>

<p>开始</p>//台词开始  在E元素之前插入生成的内容
<style>

  p:after{ content:'台词'}

</style>

<p>开始</p>//开始台词   在E元素之后插入生成的内容

html基础（选择器，font属性 ）的更多相关文章

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

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

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

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

  3. 前端,基础选择器,嵌套关系.display属性,盒模型

    基础选择器 1.统配选择器 控制html,body及body内跟显示相关的标签 *{ width:80px; height:80px; background-color:red; } 2.类选择器 以 ...

  4. jQuery---jq基础了解(语法,特性),JQ和JS的区别对比,JQ和JS相互转换,Jquery的选择器(基础选择器,层级选择器,属性选择器),Jquery的筛选器(基本筛选器,表单筛选器),Jquery筛选方法

    jQuery---jq基础了解(语法,特性),JQ和JS的区别对比,JQ和JS相互转换,Jquery的选择器(基础选择器,层级选择器,属性选择器),Jquery的筛选器(基本筛选器,表单筛选器),Jq ...

  5. css基础知识之属性选择器

    css属性选择器及属性和值选择器如下: <!DOCTYPE html> <html lang="en"> <head> <meta cha ...

  6. Python 45 长度及颜色单位 、字体样式 、文本样式 、背景样式 、css基础选择器

    一:长度及颜色单位   长度单位       px(像素)        in(英寸)       pt(点),一个标准的长度单位,1pt = 1/72in       mm(毫米)       cm ...

  7. jquery 选择器(name,属性,元素)大全

    jQuery 选择器大体上可分为:基本选择器.层次选择器.过滤选择器.表单选择器. 其中过滤选择器可以分为:简单过滤选择器.内容过滤选择器.可见性过滤选择器.属性过滤选择器.子元素过滤选择器.表单对象 ...

  8. css基础之 font的简写规则 以及 自定义 CSS3 @font-face详细用法

    Part 1 font简写 CSS的命名规则是用英文字母 数字 和下划线(一般用小写)来命名.简写css font的好处有三:一是写起来方便(就像键盘快捷键):二是简化代码:三是帮助你熟悉和深刻理解c ...

  9. JQuery————基础&&基础选择器

    环境搭建 搭建一个jQuery的开发环境非常方便,可以通过下列几个步骤进行. 下载jQuery文件库 在jQuery的官方网站(http://jquery.com)中,下载最新版本的jQuery文件库 ...

  10. jQuery学习笔记（一）——基础选择器、过滤选择器、表单选择器

    $()就是jQuery中的函数,它的功能是获得()中指定的标签元素.如演示样例中$("p")会得到一组P标签元素,当中"p"表示CSS中的标签选择器.$()中的 ...

随机推荐

  1. JS基础_对象的简介、对象的基本操作

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...

  2. python3.3.2中的关键字（转）

    The following identifiers are used as reserved words, or keywords of the language, and cannot be use ...

  3. Boost Graph Library materials

    Needed to compute max flow in a project and found the official document of BGL to be rather obscure, ...

  4. 宝塔控制面板+wordpress搭建个人网站

    上个月买了服务器和域名之后就搁置了,今天有空闲就来配合教程尝试一下搭建个人网站,下面是网站搭建的详细过程以及中间的一些细节问题,写这篇文章的目的就是希望能够帮到一些小伙伴,或者为以后搭建网站做一些参考 ...

  5. vue项目中实现图片懒加载的方法

    对于图片过多的页面,为了加速页面加载速度,所以很多时候我们需要将页面内未出现在可视区域内的图片先不做加载, 等到滚动到可视区域后再去加载.这样子对于页面加载性能上会有很大的提升,也提高了用户体验. 实 ...

  6. Flask框架学习篇（一）

    安装好Python,pip install flask安装好flask后,开始编写第一个flask程序 #包含动态路由的flask程序from flask import Flask app= Flas ...

  7. Element 封印

    官方网站 https://element.eleme.cn/#/zh-CN 简介 Element 是一套为开发者.设计者和产品经理准备的基于Vue2.0的组件库,提供了配套的设计资源,帮助快速建立网站 ...

  8. 语义分割之RefineNet

    背景介绍 近来年,深度卷积网络在目标检测方面取得了一定的成绩.但对于密集预测,仍存在一定不足,原因是频繁的卷积和池化导致最终的特征分辨率降低. 针对这个问题,目前主要采用两种方法:第一种:空洞卷积,如 ...

  9. 配置LANMP环境（6）-- 安装APACHE与PHP配置

    一.安装 Apache 2.4 安装:默认安装2.4版本 yum install httpd 修改配置 vim /etc/httpd/conf/httpd.conf 42行80端口改为 8080查看行 ...

  10. js 深浅拷贝 笔记总结

    一.js 数据类型 javaScritp的数据类型有:数值类型.字符串类型.布尔类型.null.undefined.对象(数组.正则表达式.日期.函数),大致分成两种:基本数据类型和引用数据类型, 其 ...