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 ...
随机推荐
- axios.js
Vue 原本有一个官方推荐的 ajax 插件 vue-resource,但是自从 Vue 更新到 2.0 之后,官方就不再更新 vue-resource 目前主流的 Vue 项目,都选择 axios ...
- Linux常见命令（四）——mkdir
今天我们来介绍第四个命令:mkdir.mkdir (Make Directory 创建目录): 若指定目录不存在则创建目录.在创建目录时,要求创建目录的用户具有写权限,并应保证新建的目录没有重名. 用 ...
- 【Maven】构建war包时排除web.xml
在使用maven构建项目的war包时,有时并不需要src/webapp/WEB-INF/下的一些文件. 这时可以通过maven-war-plugin创建配置来排除这些文件.下面贴出我平时使用的pom. ...
- APUE 3 -- 信号（signal）<I> ：概念
信号可以理解成一种软件中断.他提供了一种异步处理事件的方式.每个信号都有一个与之对应的信号名,这些信号名都带有SIG前缀,如:SIGABRT,SIGALARM.头文件signal.h 中定义了所有的信 ...
- Spring中的AOP开发
1.代理模式 找个人将你原本想做的事情给做了. 三个部分组成: 抽象主题角色:真实主题和代理主题的共同接口. 真实主题角色:定义了代理角色所代表的真实对象. 代理主题角色:含有对真实主题角色的引用.代 ...
- 2_linux 常用基本命令
相信当你看到此帖子时,你已不再是当年那个颓废的你,你一定也在追梦的路上奔跑,那么请留下你的“梦”,让我们用心去交流,好吗? 废话不多说,直接说正事! 一.查看磁盘分区 1.fdisk -l 查看磁盘 ...
- 基本元件库（Basic）
- Web学习-jsp实现servlet过程赏析
Jsp在某种程度上就是一种servelt. 来看看tomcat容器如何将jsp页面翻译成一个"servlet". 一. F:\apache-tomcat-6.0.51\work\C ...
- 第一篇--认识Jmeter
Jmeter是Apache组织开发的基于Java的压力测试工具,它最初被设计用于Web应用测试,但后来扩展到其他测试领域. 它可以用于测试静态和动态资源,例如静态文件.Java 小服务程序.CGI 脚 ...
- LVDS/RGB转EDP稳定方案----NCS8801S
目前山寨平板市场已经进入白热化,同质化的竞争.厂商的利润被压得非常的薄.一味的价格战肯定会带来行业洗牌.差异化是许多厂商的选择,而其中一条重要的路子,就是采用高分辨率的down-grade屏.如苹果的 ...