前端开发—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页面变得 ...
随机推荐
- 淘宝的开源分布式文件系统TFS
TFS(Taobao FileSystem)是淘宝团队开源的海量非结构化数据存储设计的分布式系统.构筑在普通的Linux机器集群上,可为外部提供高可靠和高并发的存储访问.高可扩展.高可用.高性能.面向 ...
- 嵌入式linux实现NAT端口映射
场景: 1.嵌入式linux系统内已经在2个网卡,分别为eth0(内网物理网卡,ip地址:192.168.1.4)以及ppp1(VPN客户端通过PPTP协议拨号生成的虚拟网卡,ip地址:192.168 ...
- Solr Update插件自定义Update Chain按条件更新索引
背景:基于call客,来电和跟进记录等多个数据来源的用户文档,需要在更新是判断首来源的时间. 如对电话号码11xxxx来说,来电时间是今天,call客时间是昨天,而call客数据又可能因为网络原因晚上 ...
- 简述synchronized和java.util.concurrent.locks.Lock的异同
1.synchronized 用在方法和代码块的区别? a. 可以只对需要同步的使用 b.与wait(),notify()和notifyall()方法使用比较方便 2.wait() a.释放持有的对象 ...
- 介绍一个不错的服务器综合监控工具脚本集aspersa
http://blog.csdn.net/jackyrongvip/article/details/9217869
- K - Transformation
K - Transformation HDU - 4578 思路:发现自己的错误竟然是zz般的少了一个取模 ε＝ε＝ε＝(#>д<)ﾉ #include<cstdio> # ...
- Java中的事务
Java中的事务 学习了:https://www.cnblogs.com/chengpeng15/p/5802930.html 膜拜一下 org 分为三类:jdbc事务.jta事务.容器事务:
- LNMP编译安装(centos7+nginx1.9+mysql5.6+php5.5)
LNMP编译安装 # 需先配置IP # 软件包的路径 /usr/local/src yum install -y libjpeg-devel libpng-devel freetype-devel c ...
- win server 2008 r2 iis+php 500错误内部服务器错误。
今天遇到一个错误是iis 500错误,由于server是别人负责的.查看日志没什么异常,就发如今任务日志里发现有一段时间间隔没有记录.一開始不知道为什么.之后日志里就都是500错误了,在iis哪里配置 ...
- Linux Terminal fortune
Linux下,我们能够使用apt-get安装fortune,这是一个比較有趣的功能 在输入fortune之后,Terminal会输出一句名言.诗句,或一些有趣的话: 默认情况下.fortune仅仅会显 ...