css基础(css书写 背景设置 标签分类 css特性)

css书写位置

行内式写法

<p style="color:red;" font-size:12px;></p>

外联式写法

<link rel="stylesheet " href="地址" type="text/css"/>

嵌入式写法

<style type="css/stylesheet">
  p{ font-size:20px; color:red; }
</style>

注意:3个不同书写方式的优先级:行内式>嵌入式>外联式(在多少项目中为了保持代码的整洁,都会用嵌入式。维护性高,影响范围广,当整个网站的站点。)

html标签分类

块级元素

典型代表:div、p、li、h1

特点:元素自己独占一行显示(与宽度无关)

可以设置宽度和高度

当嵌套一个块级元素,子元素如果不设置宽度,那么该子元素的宽度为父元素的宽度。

行内元素:

典型代表:span 、a、font、strong……

特点:元素在一行显示

不能直接设置宽度高度

<span>我</span>
<span>是</span>
<span>国</span>
<span>人</span>

行内块元素

典型代表:Image,input (表单控件)

特点:元素在一行上显示

可以设置宽度和高度

元素之间的转换

display:inline    将元素转化为行内元素

div{width:10px; height:10px; display:block;}

display:inline-block  将元素转化为行内块元素

div{ width:300px; height:20px; display:inline;}

display:block  将元素转化为块元素

a{ display:block; width:20px; height:30px;}

 Css特性

继承性

继承关系:嵌套标签之间,子级会继承父级元素的样式(备注:有关文字的属性都可以继承)

特殊性:a 标签的颜色不能继承,必须对a标签本身进行设置

H标签的文字大小不能改变,必须对H标签本身进行修改

层叠性

样式的覆盖,样式的层叠与类名顺序没有关系,与样式定义顺序有关

.two{color:green;}
.now{color:red;}
<p class="noe two"></p>//红色

优先级

!impotrant > 行内样式 > id选择器 > 类选择器 > 标签选择器 > 通配符>继承

<style type="text/css">
  p{ color:red; !important; //优先级最大,红色
     color:#foo;
}
<style>
<p>sssss<p>

css优先级法则

1、选择器都有一个权值,权值越大越优秀

2、当权值相等时,后出现的样式设置要优先于先出现的样式设置

3、创造者的规则高于游览者:网页编写者设置的css样式的优先权高于浏览器所设置的颜色

4、继承的css样式不如后来制定的css样式;

时间: 09-11

css基础(css书写 背景设置 标签分类 css特性)的相关文章

CSS基础篇之背景、过渡动画

background-origin(背景原点) 设置元素背景图片的原始起始位置.必须保证背景是background-repeat为no-repeat属性才能生效. background-origin:border-box|padding-box|content-box: border-box 这是用border-box时图片位于边框左上角 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"&g

XHTML+CSS基础知识(四):用CSS控制页面

1.CSS写入页面的方法有哪些? 行内式:直接在标签当中利用style属性来写样式表. 内嵌式:将所有的样式表提取出来放到网页头部的style标签当中. 链接式:将样式表单独写成一个.css文件,利用link标签在网页头部引用,W3C标准推荐. 导入式:利用@import来引入样式表,由于效率等等问题已经被淘汰 2.CSS样式表的优先级? 理论上:行内样式>内嵌样式>链接样式>导入样式 实际上:就近原则,内嵌.链接.导入在同一个文件的头部,谁距离相应的代码近,谁的优先级别就更高一些.相当

CSS基础学习十五:盒子模型补充之外边距合并

今天继续接着CSS盒子模型补充,CSS基础学习十三:盒子模型和CSS基础学习十四:盒子模型补充之display属 性设置都是介绍了盒子模型中的内容概括.开始今天的主题:外边距合并. 外边距合并指的是,当两个垂直外边距相遇时,它们将形成一个外边距.合并后的外边距的高度等于两个发生合 并的外边距的高度中的较大者. (1)外边距合并 外边距合并叠加是一个相当简单的概念.但是,在实践中对网页进行布局时,它会造成许多混淆.简单地说,外 边距合并指的是,当两个垂直外边距相遇时,它们将形成一个外边距.合并后的

Form标签+Css基础

一.Form表单标签 <form action="" method=""></form> 表单就是用来将用户的信息提交到服务器,服务器会将信息存储或者根据信息查询数据(增删改查). 表单中所有的内容都要写在form标签中. <input type="text" value="哈哈哈哈" placeholder="请输入用户名"> Input文本输入框,type类型为tex

CSS基础学习十四:盒子模型补充之display属性设置

我在CSS基础学习十三:盒子模型的i博文只是阐释了CSS盒子模型,并没有过多的使用实例来演示.这篇博文 就来做一些盒子模型知识的补充.这一部分对于网页总体布局还是蛮重要的,过去大多数使用HTML中的table元素和 框架标签来进行网页的整体布局,现在我们使用最多的是DIV+CSS网页布局.所以一定要掌握好盒子模型,记住 content,border,padding和margin各自在盒子中的作用和使用方式. 先来看一个完整元素的盒子模型实例: <!DOCTYPE html PUBLIC "

CSS基础(背景、文本、列表、表格、轮廓)

CSS 背景属性 属性 描述 background 简写属性,作用是将背景属性设置在一个声明中. background-attachment 背景图像是否固定或者随着页面的其余部分滚动. background-color 设置元素的背景颜色. background-image 把图像设置为背景. background-position 设置背景图像的起始位置. background-repeat 设置背景图像是否及如何重复. CSS 文本属性 属性 描述 color 设置文本颜色 directi

html和css基础知识

一,html+css基础1-1Html和CSS的关系学习web前端开发基础技术需要掌握:HTML.CSS.JavaScript语言.下面我们就来了解下这三门技术都是用来实现什么的:1. HTML是网页内容的载体.内容就是网页制作者放在页面上想要让用户浏览的信息,可以包含文字.图片.视频等.2. CSS样式是表现.就像网页的外衣.比如,标题字体.颜色变化,或为标题加入背景图片.边框等.所有这些用来改变内容外观的东西称之为表现.3. JavaScript是用来实现网页上的特效效果.如:鼠标滑过弹出下

Css 基础知识(一)

1.Css概念 CSS 指层叠样式表 (Cascading Style Sheets)(级联样式表),Css是用来美化html标签的,相当于页面化妆. ◆样式表书写位置 2. 选择器 2.1.写法 选择器是选择谁(标签)的过程 选择器{属性:值: 属性:值;}   属性 解释 Width:20px; 宽  (px:像素) Height:20px; 高 Background-color:red; 背景颜色 font-size:24px; 文字大小 text-align:left | center|

html-Css 基础大全

一. HTML基础 Web组成:结构(XHTML.XML).表现(css).行为(ecmascript) HTML:超文本标记语言(hyper text markup language) HTML5的基本结构: 1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Document</title&