前端开发—CSS
| CSS 基础概念 |
致命三问：
它是什么？ 层叠样式表，主要作用是对html标签进行装饰。
它的作用：再 html 框架的基础上 ，对标签内容做美化工作。
注释方法：/*单行注释*/ 多行注释同理与html
语法结构：
在HTML中使用CSS样式的三种方式
1 head 内style 标签内部直接书写css代码
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
p{
background-color: #2b99ff;
}
</style>
</head>
2 link 标签引入外部css文件
<link href="mystyle.css" rel="stylesheet" type="text/css"/>
3 直接在标签内通过style属性书写css样式、
<p style="color: red">Hello world.</p>
| 各种选择器 |
基本选择器
1 元素选择器
p {color: "red";}
2 id选择器
#i1 {
background-color: red;}
3 类选择器
.c1 {
font-size: 14px;}
p.c1 {
color: red;}
4 通用选择器
* {
color: white;}
注意：
样式类名不要用数字开头（有的浏览器不认）。
标签中的class属性如果有多个，要用空格分隔。
组合选择器
1 后代选择器
/*li内部的a标签设置字体颜色*/
li a {
color: green;}
2 儿子选择器
/*选择所有父级是 <div> 元素的 <p> 元素*/
div>p {
font-family: "Arial Black", arial-black, cursive;}
3 毗邻选择器
/*选择所有紧接着<div>元素之后的<p>元素*/
div+p {
margin: 5px;}
4 弟弟选择器
/*i1后面所有的兄弟p标签*/
#i1~p {
border: 2px solid royalblue;}
属性选择器
/*用于选取带有指定属性的元素。*/
p[title] {
color: red;}
/*用于选取带有指定属性和值的元素。*/
p[title="213"] {
color: green;}
分类和嵌套
1 分组
当多个元素的样式相同的时候，我们没有必要重复地为每个元素都设置样式，我们可以通过在多个选 择器之间使用逗号分隔的分组选择器来统一设置元素样式。
div, p {
color: red;}
上面的代码为div标签和p标签统一设置字体为红色。
2 嵌套
.c1 p {
color: red;}
伪类选择器
/* 未访问的链接 */
a:link {
color: #FF0000
} /* 已访问的链接 */
a:visited {
color: #00FF00
} /* 鼠标移动到链接上 */
a:hover {
color: #FF00FF
} /* 选定的链接 */
a:active {
color: #0000FF
} /*input输入框获取焦点时样式*/
input:focus {
outline: none;
background-color: #eee;
}
伪元素选择器
first-letter
p:first-letter {
font-size: 48px;
color: red;}
before
/*在每个<p>元素之前插入内容*/
p:before {
content:"*";
color:red;}
after
/*在每个<p>元素之后插入内容*/
p:after {
content:"[?]";
color:blue;}
| 选择器的优先级 |
相同的选择器，不同的引入方式，就近原则，谁越靠近标签谁说了算。不同选择器，相同的引入方式。 行内样式 > id 选择器 > 类选择器 > 标签选择器
| 样式修改 |
列表
UL无序列表，去除固定样式：
ul {
list-style-type: none;
padding-left:;
}
前端开发—CSS的更多相关文章
- 前端开发css实战：使用css制作网页中的多级菜单
前端开发css实战:使用css制作网页中的多级菜单 在日常工作中,大家都会遇到一些显示隐藏类菜单,比如页头导航.二维码显示隐藏.文本提示等等......而这些效果都是可以使用纯css实现的(而且非常简 ...
- WEB前端开发CSS基础样式全面总结
Web前端开发css基础样式全面总结 颜色和单位的使用 颜色 用颜色的名字表示颜色,比如:red 用16进制表示演示 比如:#FF0000 用rgb数值表示颜色,rgb(红,绿,蓝),每个值都在0-2 ...
- 前端开发css禁止选中文本
在我们日常的Java web前端开发的过程中呢,程序员们会遇到各种各样的要求,所以不每天学的东西感觉自己都退步了,都更不上时代的发展了. 每天应对各种需求,每天活在疑问中就是我们程序员的真是写照.但我 ...
- 1+x 证书 Web 前端开发 css 专项练习
官方QQ群 1+x 证书 Web 前端开发 css 专项练习 http://blog.zh66.club/index.php/archives/192/
- 第十一章 前端开发-css
第十一章 前端开发-css 1.1.0 css介绍 css是指层叠样式表(Cascading Style Sheets),样式定义如何显示html元素,样式通常又会存在于样式表中. css优势: 内容 ...
- web前端开发CSS命名规范参考
做为一个web前端工程师,每天接触HTML.css就像吃饭一样,但是作为一名合作.优秀的web前端工程师,对DIV+CSS命名还是有一定的规范的,本文整理了一份web前端开发中DIV+CSS各种命名规 ...
- 前端开发CSS清除浮动的方法有哪些？
在前端开发过程中,非IE浏览器下,当容器的高度自动,并且容器内容中有浮动元素(float为left或right),此时如果容器的高度不能自适应内容的高度,从而使得内容溢出破坏整体布局,这种现象叫做浮动 ...
- Web前端开发CSS规范总结
作为Web前端开发必备语言,CSS为大家广为熟知,今天就跟大家分享下CSS规范总结,Web前端的小伙伴们看过来吧! CSS样式的权值(权重) 权值等级的定义 第一等:代表内联样式,如: style=” ...
- 前端开发 CSS中你所不知道的伪类与伪元素的区别--摘抄
做过前端开发的人都熟悉伪类与伪元素,而真正能够彻底了解这二者的区别的人并不多.伪类与伪元素确实很容易混淆. 伪元素主要是用来创建一些不存在原有dom结构树种的元素,例如:用::before和::aft ...
- web前端开发——css
一.css介绍 1.css是什么? Cascading Style Sheets缩写,层叠样式表.样式定义如何显示HTML元素,样式通常又会存在于样式表中. 2.为什么需要css? 使HTML页面变得 ...
随机推荐
- 小记——Grub Rescue恢复
下面我要讲的是一个悲伤的故事 引子 电脑状况简介:两块硬盘(1HHD.1SSD),SSD上装了LINUX(40G)+WIN10(50G)的双系统,SSD剩余部分在WIN下使用装程序,HHD做仓库.LI ...
- 数据结构----队列：顺序队列&顺序循环队列、链式队列、顺序优先队列
一.队列的概念: 队列(简称作队,Queue)也是一种特殊的线性表,队列的数据元素以及数据元素间的逻辑关系和线性表完全相同,其差别是线性表允许在任意位置插入和删除,而队列只允许在其一端进行插入操作在其 ...
- UVa Problem 10051
这题有点类似LIS,由于颜色最多100种,所以只需建立一个100的数组,按对立面的关系以某种颜色为向上面的最大值就可以了. #include <iostream> #include & ...
- ASP内置对象—Request、Response 、Server、Application 、ObjectContent （二）
Response (应答)对象 Request 对象.用于在HTTP请求期间,訪问不论什么client浏览器传递给server的信息,包含通过URL传递的參数信息.使用GET方法或POST方法传递的H ...
- HDU 5402 Travelling Salesman Problem （模拟 有规律）（左上角到右下角路径权值最大，输出路径）
Travelling Salesman Problem Time Limit: 3000/1500 MS (Java/Others) Memory Limit: 65536/65536 K (J ...
- linux程序设计——多线程（第十二章）
12.8 多线程 之前,总是让程序的主线程只创建一个线程.这节将演示怎样在同一个程序中创建多个线程,然后怎样以不同于其启动顺序将它们合并在一起.此外,还演示多线程编程时easy出现的时序问题. ...
- H_Dp
<span style="color:#000099;">/* H - 简单dp 例题扩展 Time Limit:3000MS Memory Limit:65536KB ...
- sikuli+eclipse实例
设置sikuli环境变量 如果在执行脚本的时候出现以下错误: Getting the VisionProxy.dll: Can not find dependent libraries... 把Sik ...
- Codeforces Round #244 (Div. 2)D （后缀自己主动机）
Codeforces Round #244 (Div. 2)D (后缀自己主动机) (标号为0的节点一定是null节点,不管怎样都不能拿来用,切记切记,以后不能再错了) 这题用后缀自己主动机的话,对后 ...
- PHP获取数组长度的方法 函数参数的比较
在php中获取数组长度方法很简单,php为我们提供了两个函数可以计算一维数组长度,如count,sizeof都可以直接统计数组长度哦,下面我们来看几个实例吧.php如何获取数组的长度,使用php函数c ...