css以及选择器基础
CSS样式基础了解
1.css基础语法
CSS样式的出现是为了将内容和表现分离极大的提高了工作效率
内联样式(在 HTML 元素内部)
<p style="margin-left: 10px;margin-right:10px"></p>
<标签名 style="属性:属性值;属性:属性值;" 属性="属性值"></标签名>
内部样式表(位于 <head> 标签内部)
<style type="text/css">
h1
{color: maroon}
h2
{color: blue}
</style>
外部样式表(实现了内容与表现的分离,推荐使用)
先建立外部样式表文件(*.css)使用HTML的link对象
<link href="ceshi.css" rel="stylesheet" type="text/css" />
rel="stylesheet"描述了当前页面与href所指定文档的关系
三、CSS选择器【重点】
1.css基础先择器
①元素选择器(有特殊功能的标签做)
h1{
color: yellow;
}
②类选择器(class)
.a{
background-color: #00ABFF;
}
使用方法:
第一步:使用合适的标签把要修饰的内容标记起来,如下:
<span>Web开发</span>
第二步:使用class="类选择器名称"为标签设置一个类,如下:
<span class="one">Web开发</span>
第三步:设置类选器css样式,如下:
.one{color:red;}
样式层叠
③ID选择器(id)
#b{
background-color: red;
}
Id和class的区别主要在于,在一个文档中【重点】
Id不能重复使用,指一个元素的唯一标识符
Class可以重复使用,指同一类的多个对象
用class表现共性,表示一类带有共同特征的对象,class可以复用
用id作为唯一标识符,同一网页中id不能重复出现
三种基本选择器的组合形态:
元素.{}
元素#{}
④包含选择器
选择所有被E1包含的E2。中间用空格分隔。
语法: E1 E2
#content p{
color: green;
}
⑤选择器分组
将同样的定义应用于多个选择符
语法: 选择器1,选择器2,选择器3
p,h2,h1{
background-color: pink;
}
可以避免重复写代码
⑥子元素选择器
X>Y:子元素选择器(不能跳级)
页面布局常见命名规范
参考:http://wenku.baidu.com/link?url=ZErK6r8GecSTpcrKUfnmW_ks1VhZyvuW9yiUVS83c_40fImZ4ZUG2_nBSA4i-j7tkEXaPdUrdR3_ABc3PYaB2AduDZzzuXa577OQii9zXyS
⑦css高级选择器
通用元素选择器
*{
}
相邻元素选择器
需要选择紧接在另一个元素后的元素,而且二者有相同的父元素,可以使用相邻兄弟选择器
X + Y:X之后的第一个Y类型兄弟元素
X ~ Y:X之后的所有Y类型兄弟元素
⑧伪类【重点】
锚伪类
a:link {color: #FF0000} /* 未访问的链接 */
a:visited {color: #00FF00} /* 已访问的链接 */
a:hover {color: #FF00FF} /* 鼠标移动到链接上 */
a:active {color: #0000FF} /* 选定的链接 */
提示:在 CSS 定义中,a:hover 必须被置于 a:link 和 a:visited 之后,才是有效的。
提示:在 CSS 定义中,a:active 必须被置于 a:hover 之后,才是有效的。
文本伪类(伪元素)伪元素只能用于块级元素。
:first-line用于向文本的首行设置特殊样
:first-letter用于向文本的首字母设置特殊样
:before在元素之前添加内容。
:after在元素之后添加内容。
结构性伪类(什么情况下比较常用)
:first-child 选择器表示的是选择父元素的第一个子元素
:last-child 选择器选择的是选择父元素的最后一个子元素
X:nth-of-type(n) X:nth-child(n)
X:only-of-type X:first-child
X:first-of-type X:last-child
X:last-of-type(n) X:only-child
属性选择器(表单样式设计常用)
input[type=text]{
border-color: red;
}
css以及选择器基础的更多相关文章
- 前端基础:CSS样式选择器
前端基础:CSS样式选择器 CSS概述 CSS是Cascading Style Sheets的简称,中文意思是:层叠样式表,对html标签的渲染和布局.CSS规则由两个主要的部分组成:1.选择器:2. ...
- 【CSS简介、基础选择器、字体属性、文本属性、引入方式】前端小抄(2) - Pink老师自学笔记
[CSS简介.基础选择器.字体属性.文本属性.引入方式]前端小抄(2) 本学习笔记是个人对 Pink 老师课程的总结归纳,转载请注明出处! 一.CSS简介 CSS 的主要使用场景就是布局网页,美化页面 ...
- CSS简介,基础选择器,字体属性,文本属性
欢迎大家去博客冰山一树Sankey,浏览效果更好.直接右上角搜索该标题即可 博客园主页:博客园主页-冰山一树Sankey CSDN主页:CSDN主页-冰山一树Sankey 前端学习:学习地址:黑马程序 ...
- CSS的选择器
<div id="demo"> <div class="inner"> <p><a href="#" ...
- css+js+html基础知识总结
css+js+html基础知识总结 一.CSS相关 1.css的盒子模型:IE盒子模型.标准W3C盒子模型: 2.CSS优先级机制: 选择器的优先权:!important>style(内联样式) ...
- CSS概述<选择器总结>
概述:CSS是指层叠样式表,他是定义如何显示HTML元素,样式表通常存储在样式表中,通常存储在.css文件中,下面对css的选择器进行总结,便大家夯实基础! 1 语法规范: 每个样式规则有两个部分:选 ...
- (1) css的核心基础
css的核心基础 1.css的基本语法在具体使用css之前,请各位兄弟姐妹先思考一个生活中的问题,一般情况下我们是如何描述一个人的呢? 小明{ 民族:汉族: 性格:温柔: 性别:男: 体重:68kg ...
- CSS.01 -- 选择器及相关的属性文本、文字、字体、颜色、
与html相比,Css支持更丰富的文档外观,Css可以为任何元素的文本和背景设置颜色:允许在任何元素外围设置边框:允许改变文本的大小,装饰(如下划线),间隔,甚至可以确定是否显示文本. 什么是CSS? ...
- HTML+DIV+CSS+JSweb前端基础
HTML+DIV+CSS+JSweb前端基础 1.<html>和</html> 标签限定了文档的开始和结束点. 属性: (1) dir: 文本的显示方向,默认是从左向右 (2 ...
随机推荐
- call, apply,bind 方法解析
call(), apply(),bind() 三者皆为Function的方法 call(),apply()的作用是调用方法,并改变函数运行时的context(作用上下文) bind() 的作用是引用方 ...
- Django 踩过的坑(一)
平台:win10 工具:cmd python3 刚刚学习Django搭建环境,网站还木有发布,就直接来了个大麻烦. 一切按着<Django 学习笔记(二)>这篇文章来的,在最后cmd运行服 ...
- CentOS下源码安装vsftpd-3.0.0,并设置指定用户访问指定目录(附带完整配置文件)
1.卸载系统已经存在的ftp服务器 因为是源码安装,所以不能通过rpm -qa的方式查看是否已经安装ftp服务器,可以通过find / | grep vsftp*方式查看系统中存在哪些与vsftpd相 ...
- mybatis学习笔记(五) -- maven+spring+mybatis从零开始搭建整合详细过程(附demo和搭建过程遇到的问题解决方法)
文章介绍结构一览 一.使用maven创建web项目 1.新建maven项目 2.修改jre版本 3.修改Project Facts,生成WebContent文件夾 4.将WebContent下的两个文 ...
- 我的学习之路_第二十八章_JQuery 和validator插件
jQuery 利用jQuery进行遍历 js原生: for(var i=0;i>?;i++){ } jQuery: 方式一: 想要遍历的jQuery对象.each(function(index, ...
- [javascript 实践篇]——那些你不知道的“奇淫巧技”
1. 空(null, undefined)验证 刚开始,我是比较蠢的验证(我还真是这样子验证的) if (variable1 !== null || variable1 !== undefined | ...
- eclipse打开时提示:failed to create the java virtual machine
Eclipse打开时提示: failed to create the java virtual machine 原因:C盘空间不够 编辑删除 处理:1.用金山清理临时文件: 2.用金山手机卫士连接 ...
- HDU 5547 Sudoku(DFS)
题目网址:http://acm.hdu.edu.cn/showproblem.php?pid=5547 题目: Sudoku Time Limit: 3000/1000 MS (Java/Others ...
- 使用pillow生成分享图片
重复性的工作一定要交给计算机去做! 有时候要为公司做一张宣传用的分享图片,很简单交给设计通过ps.AI做好就行了,但是如果一个网站要为每个用户生成一张专属的分享图片,如果让设计师一张一张的去做,哪设计 ...
- VUE 分页组件
<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title>& ...