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 ...
随机推荐
- Sublime Text前端开发工具介绍
Sublime Text前端开发工具介绍.. Sublime Text这款前端开发工具中的非常优秀的特性进行介绍 ------------ sublime text 3 3114 注册码 —– BEG ...
- Vim 命令图解-Gvim使用笔记
Vim 命令图解-Gvim使用笔记... 参考的网址:http://blog.vgod.tw/wp-content/uploads/2014/08/vgod-vim-cheat-sheet-full. ...
- 如何编写更好的SQL查询：终极指南-第一部分
结构化查询语言(SQL)是数据挖掘分析行业不可或缺的一项技能,总的来说,学习这个技能是比较容易的.对于SQL来说,编写查询语句只是第一步,确保查询语句高效并且适合于你的数据库操作工作,才是最重要的.这 ...
- GoogleNet：inceptionV3论文学习
Rethinking the Inception Architecture for Computer Vision 论文地址:https://arxiv.org/abs/1512.00567 Abst ...
- C语言排序
排序算法 快速排序 C语言快速排序qsort(数组,长度,元素大小,cmp函数(*,*))//注意函数cmp的参数为指针 #include <stdio.h> #include <s ...
- Element is not clickable at point error in chrome
I see this only in Chrome. The full error message reads: "org.openqa.selenium.WebDriverExceptio ...
- Grails笔记二：grails 2.4.3版本下generate-*失效问题解析
最近在学grails框架,因为其敏捷性让我非常喜欢,不过有点让人恼怒的是也许因为grails框架太新了,所以关于grails的书籍很少,而且市面上的书籍大部分都是2007或者2009年的,官方文档又都 ...
- Kafka中操作topic时 Error:Failed to parse the broker info from zookeeper
Kafka中操作topic时 Error: Failed to parse the broker info from zookeeper 1.问题描述 2.问题原因 kafka在启动后 ...
- border-radius值的解析
border-radius: none | length{1,4} / length{1,4} 其中每一个值可以为 数值或百分比的形式. length/length 第一个lenght表示水平方向的半 ...
- ue4音效、动画结合实例
在游戏中,许多音效需要在动画恰当的时机出现,例如行走.奔跑,就需要恰好在足部落地瞬间播放. 而AnimNotify就能非常方便地处理此类问题. AnimNotify,顾名思义就是动画通知,能在特定的动 ...