CSS 入门基础
一、CSS 介绍什么是CSS
CSS 指的是层叠样式表（Cascading StyleSheet）。在网页制作时采用层叠样式表技术，
可以有效地对页面的布局、字体、颜色、背景和其它效果实现更加精确的控制。
CSS 的基础语法
CSS 规则由两个主要的部分构成：选择器，以及一条或多条声明。
h1{
color:red;
font-size:14px;
}
属性大于 1 个之后，属性之间用分号隔开。这行代码的作用是将 h1 元素内的文字颜色定义为红色，同时将字体大小设置为 14 像素。
css 高级语法
1.选择器的分组
h1，h2，h3，h4，h5，h6{
color：red;
}
2.继承
根据 CSS，子元素从父元素继承属性
body{
color：green;
}
通过 CSS 继承，子元素将继承最高级元素（在本例中是 body）所拥有的属性（这些子元素诸如 p, td, ul, ol, ul, li, dl, dt,和 dd）。
派生选择器
派生选择器 通过依据元素在其位置的上下文关系来定义样式，可以使标记更加简洁。
比方说，你希望列表中的 strong 元素变为红色，而不是通常的黑色，可以这样定义一个派生选择器：
li strong{
color: red;
}
<p><strong>我是黑色，因为我不在列表当中，所以这个规则对我不起作用</strong></p>
<u1>
<li><strong>我是红色。这是因为 strong 元素位于 li 元素内。</li>
</u1>
id 选择器
1.id 选择器： id 选择器可以为标有 id 的 HTML 元素指定特定的样式 id 选择器以“#”来定义
2.id 选择器和派生选择器： 目前比较常用的方式是 id 选择器常常用于建立派生选择器
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<link href="MyCss.css" type="text/css" rel="stylesheet">
</head>
<body>
<p id="pid">hello css<a href="www.shiyanlou.com">shiyanlou</a></p>
<div id="divid">this is a div</div> </body>
</html>
#pid a{
color:#00755f;
}
#divid {
color: red;
MyCss.cs文件
类选择器
(1)在 CSS 中，类选择器以一个点号显示
.divclass {
color: red;
}
下面的 html 代码中，div 元素含有 divclass 类，意味着它要遵守.divclass的规则。
<div class="divclass">
hello div
</div>
(2)和 id 一样，class 也可被用作派生选择器：
.pclass a{
color: green;
属性选择器
对带有指定属性的 HTML 元素设置样式。
(1)下面的例子为带有 title 属性的所有元素设置样式：
<style>
[title] {color:red;}
</style>
属性和值选择器
<style>
[title=te]{
color: red;
}
</style>
CSS 入门基础的更多相关文章
- 第六十九节，css入门基础
css入门基础 学习要点: 1.使用CSS 2.三种方式 3.层叠和继承 本章主要探讨HTML5中CSS (层叠样式表),它是用来对HTML文档外观的表现形式进行排版和格式化. 一 使用CSS CSS ...
- CSS入门基础学习二
我们下午继续学习CSS的入门基础,搬上你的小板凳赶快进入吧! 一.背景(background) Background-color:背景颜色 background-image (背景图片) backgr ...
- 【CSS入门基础，有需要的看过来哦】心境，心静，不轻言放弃！---致CSS
整理一下近一周学习的有关CSS的基础知识笔记: CSS语法必须写在<style>标签中哦~/*注释*/ [CSS常用背景属性]background background-color:背景色 ...
- 学起来 —— CSS 入门基础
Hello,大家好! 小女来更博啦!CSS福利送上~~~ 首先给大家介绍一下CSS到底是什么? 一.CSS概念 W3C规范中,要求有三条:一 为"两个分离",二 为语言遵循语义化, ...
- CSS入门基础
认识CSS 传统HTML设计网页版面的缺点 CSS的特点 CSS的排版样式 13.1 认识CSS CSS的英文全名是Cascading Style Sheets,中文可翻译为串接式排版样式,并且CSS ...
- css入门基础知识
一.CSS常用选择器 /*CSS注释*/ /*CSS修改页面中的所有标签必须借助选择器选中. 选择器中可以写多对CSS属性:每个属性名与属性值之间用:分隔,多对属性之间,必须用;分隔 选择器{ 属性1 ...
- 13 ，CSS 入门基础,行内排版内嵌式排版和外部排版样式
1.认识 CSS 2.传统 HTML 设计网页版面的缺点 3.CSS 的特点 4.CSS 的排版样式 13.1 认识CSS CSS的英文全名是 Cascading Style Sheets,中文可翻译 ...
- HTML中CSS入门基础
HTML.CSS 实用css有三种格式:内嵌:内联:外部: 分类:内联:写在标记的属性位置,优先级最高,重用性最差内嵌:写在页面的head中,优先级第二,重用性一般外部:写在一个以css结尾的文件中, ...
- CSS入门基础学习一
一.CSS样式 1.什么是CSS: CSS是指层叠样式表(Cascading Style Sheels),CSS通常为CSS样式表或层叠样式表,主要用于设置HTML文本内容,以及版本面的布局等 2.H ...
随机推荐
- LINQ to Entities 中的查询
MSDN地址:https://msdn.microsoft.com/zh-cn/library/bb399367%28v=vs.100%29.aspx .NET Framework 4 查询是一种从数 ...
- fis3+vue+pdf.js制作预览PDF文件或其他
人生第一篇博客,的确有点紧张,但有些许兴奋,因为这对于我来说应该是一个好的开始,以此励志在技术的道路上越走越远. 看过了多多少少的技术博客,给自己带来了很多技术上的收获,也因此在想什么时候自己也可以赠 ...
- 关于操作系统中多个fork()会创建几个进程的理解
最近在看操作系统的书,在讲到用fork()创建子进程时,有些地方一时迷惑,最终理解,特记录下来.如下: //创建一个子进程:#include "csapp.h" int main( ...
- hibernate日志信息
hibernate3使用集成log4j的配置以及实现 hibernate3 自带的默认的日志框架是slf4j,hibernate3的slf只是一个日志的接口,而hibernate3 自带默认的日志 ...
- throws Exception方法异常处理机制
public class T4 { private String sex; public String getSex() { return sex; } public void setSex(Stri ...
- JS实现60s倒计时(亲测有效)，及span标签如何使用和禁用onclick事件
效果如下图:点击按钮出现60秒倒计时,60s内按钮不可用,倒计时到了时间方可再次点击获取. 另外还有一个知识点,只有input 及button这样的表单元素有disbale属性,如何设置是否可用属性的 ...
- 1000以内完全数（完美数）获取实现---基于python
"""题目: 如果一个数恰好等于它的因子之和,则称该数为"完全数" .各个小于它的约数(真约数,列出某数的约数,去掉该数本身,剩下的就是它的真约数)的 ...
- 【Beta】阶段 第三次Daily Scrum Meeting
每日任务 ·1.本次会议为第三次 Meeting 会议 ·2.本次会议在周三上午9:40召开,会议时间为10分钟 一.今日站立式会议照片 二.每个人的工作(有work item的ID) 三.工作中遇到 ...
- 团队作业4——第一次项目冲刺（Alpha版本） Day7
首先和助教及老师表示抱歉,博客确实当时就写了,但是一直不算写好,因为这几天卡住了,预计实现的功能实现不了,进度跟不上,现在也在寻求解决方法. 1.站立式会议: 遇到的困难和收获:在开发的过程中其实遇到 ...
- 201521123018 《Java程序设计》第4周学习总结
1. 本章学习总结 2. 书面作业 Q1.注释的应用:使用类的注释与方法的注释为前面编写的类与方法进行注释,并在Eclipse中查看.(截图) Q2.面向对象设计(大作业1-非常重要) 2.1 讲故事 ...