前端笔记六,级联样式单与CSS选择器(一)

在HTML文档<head>中使用<link/>元素来引入外部样式单

格式:<link type=“text/css” rel=“stylesheet href=“css样式的URL”>

CSS的格式:Selector { property:value }

使用内部CSS样式定义的语法格式,在<head>中:

<style type=“text/css”>

样式单文件定义

</style>

使用style属性更改元素外观,语法与CSS一致,此时无需指定Selector


元素选择器:

E { }:其中E表示有效的HTML元素名

属性选择器:

E { }:指定CSS样式对所有E元素起作用

E[attr] { }:对具有attr属性的E元素起作用

E[attr=value] { }:对attr属性为value的E元素起作用

E[attr~=value] { }:对attr属性的值为以空格隔开的系列值,其中某个值为value的E元素起作用

E[attr|=value] { }:对attr属性的值为以连字符分隔的系列值,其中第一个值为value的E元素起作用

E[attr^=“value”]  { }:对attr属性的值为以value开头的字符串的E元素起作用

E[attr$=“value]  { }:对attr属性的值为以value结尾的字符串的E元素起作用

E[attr*=“value”] { }:对attr属性的值包含value的字符串的E元素起作用

id选择器:

#idValue { }:对id为idValue的HTML元素起作用

E#idValue { }:仅对id为idValue的E元素起作用

class选择器:注意有个点 .

E.classValue { }:对class属性值为classValue的E元素起作用,此处E省略的话,则表示针对所有

包含选择器:

Selector1 Selector2 { }:对于Selector1中包含的Selector2的元素起作用

子选择器:

Selector1>Selector2 { }:对于Selector1中的Selector2的元素起作用,只能是子元素,不能是孙元素

兄弟选择器:

Selector1 ~ Selector2 { }:对在Selector1后面的Selector2元素起作用

选择器的组合:使用逗号隔开

Selector1,Selector2,Selector3 { }:对符合前面的Selector都起作用

伪元素选择器:以冒号开头不要空格

E:first-letter:对E内的第一个字符起作用

:first-letter只对块元素起作用,如<div>,<p>,<section>等,如果想对内联元素使用,如<span>则需要先设定对象的height,width等属性,或者设定position为absolute,或者设定display为block

E:first-line:对E内的第一行内容起作用

:first-line只对块元素起作用,如<div>,<p>,<section>等,如果要对内联元素使用,如<span>则需要先设定对象的height,weight属性,或者设定position为absolute,或者设定display属性为block

E:before:E内的前端插入内容

E:after:在E内部的尾端添加内容


内容相关的属性:都在{}花括号内的属性

include-source:该属性的值为url,目前没有浏览器支持= =

content:用于向元素之前或之后插入指定内容,也可以是一个url地址

quotes:为content属性定义open-quote和close-quote,其中前面的字符串是open-quote,后面的字符串是close-quote

counter-increment:定义一个计算器,该属性的值就是所定义计算器的名称

counter-reset:用于对指定的计数值复位

时间: 01-24

前端笔记六,级联样式单与CSS选择器(一)的相关文章

前端笔记七,级联样式单与CSS选择器(二)

只插入部分元素: 在:after,:before前使用更严格的CSS选择器 配合quotes属性执行插入 首先定义quotes,然后再指定content使用open-quote或者close-quote 配合counter-increment属性添加编号 该属性指定的字符就是计算器名称,然后通过counter属性引用计数器即可 使用自定义编号:通过counter(name,list-style-type)实现 其中,list-style-type: decimal:阿拉伯数字,默认值. disc

前端笔记——如何控制表单控件中的disabled

0.前言 本文主要说明如何使能或禁止表单控件.表单控件具有disabled属性,通过设置该属性可以禁止所有的input控件,input的更多属性请参考资料[1].下面就通过一个简单的例子说明如何设置和读取disabled属性. [示例页面--代码] <!DOCTYPE html> <html> <head> <script src="jquery.js"></script> <meta charset="utf

HTML表单及CSS选择器、伪类和伪元素

一.input标签 1.<input>实现按钮效果 -与表单相关的按钮效果 -<input type="button" value="按钮"> 2.<button>标签表示按钮 -与表单无关的按钮效果:<button>按钮</button> -类似于<input type="submit"> - 提交表单 3.<input type="image"&

移动端前端笔记 — 遇到的常见JS与CSS问题及解决方法

笔者接触移动前端快一年了,特将平时的一些笔记整理出来,希望能够给需要的人一些小小的帮助.同时也由于笔者的水平有限,虽说都是笔者遇到过使用过的,但文中可能也会出现一些问题或不严谨的地方,望各位指出,不胜感激! 一. css部分 body如果设置height:100%;overflow:hidden是依然可以滑动的,如果需禁止,要再加一层div设置 height:100%加overflow:hidden(html,body加height:100%) ,这样元素超出body的高度也不能滑动了.或者同时

CSS怎样改变行内样式(通过外部级联样式表) css !important用法CSS样式使用优先级判断

CSS样式优先级 行内>内部>外部 使用!important的css定义是拥有最高的优先级的.只是在ie6下出了一点小的bug,注意书写方式一般可以轻松避开的. CSS中的!important一般都是用于对低版本的除了iE 6 ,用来做hack的,后面缀上了!important的css语句,让浏览器首选执行这个语句,因为css有继承的样式,加上!importanrt可以覆盖父级的样式. IE6不认识它的,IE7和别的浏览器中可以用,用来处理浏览器的兼容性 .padding-l-r p span

DAY44-前端入门-css的三种引用方式以及优先级、样式与长度颜色、常用样式、css选择器

目录 一.css的三种引用方式 行间式 内联式 外联式 二.三种引入的优先级 三.样式与长度颜色 基本样式 长度 颜色 四.常用样式 字体样式 文本样式 背景样式 五.css选择器 基础选择器 基础选择器优先级 组合选择器 组合选择器优先级 属性选择器 一.css的三种引用方式 行间式 1.在标签头部的style 2.属性值是css语法 3.属性值用Key:value形式赋值,value具有单位 4.属性值之间用;隔开 <div style='width:100px;height=100px;b

web前端篇:CSS使用,样式表特征,选择器

目录 web前端篇:CSS使用,样式表特征,选择器 1.CSS介绍 2.CSS使用 3.样式表特征 4.CSS选择器 5.选择器的优先级 6.练习题: web前端篇:CSS使用,样式表特征,选择器 1.CSS介绍 CSS :Cascading Style Sheet 层叠样式表 作用 :修饰和美化页面元素,实现网页排版布局 2.CSS使用 1行内样式/内联样式 特点 :在具体的标签中使用style属性,引入CSS样式代码 语法: CSS 样式声明 / 语句: 对当前元素添加样式 语法:CSS 属

html5 中的 css样式单 的 两种调用方式的区别

在 html5 中 使用 css 样式单的方式 有4种: 1.链接外部样式文件:将样式文件 彻底与 html 文档分离,样式文件需要额外引入,这种情况下 一批样式 可以控制多份文档.对于好多文件都共有的样式单,推荐使用这种方式. 2.导入外部样式文件:此方式与第一种方式类似,但是需要用@import来引入外部样式单.由于某些浏览器(如 internet explorer)会在导入外部样式单时导致闪屏,所以不推荐用这种方式,而是尽量考虑使用第一种方式. 3.使用内部样式定义:这种方式是通过在htm

前端极易被误导的css选择器权重计算及css内联样式的妙用技巧

记得大学时候,专业课的网页设计书籍里面讲过css选择器权重的计算:id是100,class是10,html标签是5等等,然后全部加起来的和进行比较... 我只想说:真是误人子弟,害人不浅! 最近,在前端群里还发现以上观点类似的奇葩聊天,真是*** 其实,也是在很久以前,看了腾讯ISUX的一位前端工程师-麦时分享的一篇技术文章(个人站点已失效,就不贴出来了),才了解到真正的css选择器权重计算. 以下是css选择器权重计算精华所在,翻译自国外的文档(记得是W3C给出的计算规则) 如果一个声明来自s