CSS相关

CSS stands for Cascading Style Sheets
– CSS 意思就是 层叠样式表
? Styles define how to display HTML elements
– 样式定义了HTML元素怎样去显示
? Styles are normally stored in Style Sheets
– 样式一般存储在样式表中
? Styles were added to HTML 4.0 to solve a problem
– 样式添加到HTML4.0中用来解决问题
? External Style Sheets can save you a lot of work
– 利用外部样式表可以提高你的工作效率
? External Style Sheets are stored in CSS files
– 外部样式表存储在CSS文件中
? With CSS, your HTML documents can be displayed using different output styles

? 样式表定义元素怎样去显示.外部样式表能够让你改变所有出现在你WEB中的外观和布局,而仅仅通过编辑一个单独的CSS文档.(原理就是一动多变)
? CSS是一个在设计领域中的突破,因为它允许开发者一下就能控制多个WEB页的样式和布局.作为一名WEB开发者你可以为每个HTML元素和应用他的每个页面定义一个你想要的样式.

来实现全面的改变,简单的改变样式,所有与之相关的元素都会自动更新

? 样式表允许样式信息用多种方式来定义.样式可以在一单独的HTML元素中指定,在<head>元素中或在一外部CSS文件中.甚至多个外部样式表能集中在一个单一的HTML文档中

当多于一种的样式指定一HTML元素时使用怎样的样式呢? 
一般说来所有样式有下面的规则(第四个
最有优先性)
1. Browser default
浏览器默认
2. External style sheet
外部样式表(css文件)
3. Internal style sheet (inside the<head> tag)
内嵌样式表(在<head>标签内)
4. Inline style (inside an HTML element)
行内样式(在一HTML元素内)

所以写在HTML元素中的样式有最高的优先权(写在HTML元素内的),它会替代其他形式的样式
CSS语法:
The CSS syntax is made up of three parts: a selector, a property and a value:
– CSS的语法由三部分组成: 一个选择器,一个属性和一个值,例如:selector {property: value}

选择器是你希望去定义的HTML元素/标签,每个属性可以有一个值,属性和值由冒号区分开外面用大括号括起来

body {color: black}

如果值为多个单词则用双引号括起来:p {font-family: "sans serif"}
? 注意:如果你想指定多个属性,你就必须将每个属性用分号隔开,下面的例子就演示了怎样定义居中红色文字段落

p {text-align:center;color:red}

? 为了让样式定义更有可读性,你可以像这样分行描述属性

p{
    text-align: center;
    color: black;
    font-family: arial
}

? 你可以将选择器组合。用逗号分隔每个选择器。下的例子将所有的标题元素组合起来,它们的颜色都变为绿色

h1,h2,h3,h4,h5,h6 { color: green }

选择器类:

? 用选择器类你可以将同一类型的HTML元素定义出不同的样式。比如你想在你的文档中有两种不同样式的段落:一种是右对齐,另外是居中的。这就告诉你该怎么用样
式来做到这点:right,center是自定义的!

p.right {text-align: right}
p.center {text-align: center}

? 你必须在你的HTML文档中使用类属性(才能显示出效果)

<p class="right"> This paragraph will be right-aligned. </p>
<p class="center"> This paragraph will be center-aligned. </p>

注意:每个HTML元素只能有一个类属性,下面的例子是不符合规范的

<p class="right" class="center">This is a paragraph.</p>

? 你也可以省略标签名称直接去定义,这样就可以在所有的HTML元素中使用了。下面的例子就能让所有HTML中所有带class="center"的元素居中文字:.千万不要省

.center {text-align: center}

? 下面的代码中H1和P元素都有class="center"。这就意味着这两个元素都将遵循选择器"center"的规则

<h1 class="center"> This heading will be center-aligned </h1>
<p class="center"> This paragraph will also be center-aligned. </p>

id选择器

? 使用id 选择器你可以为不同的HTML元素定义相同的样式
? 下面的样式规则对任何一个带有id属性值为"green"的元素都是匹配的

#green {color: green}

? 上面的规则将匹配h1和p元素

<h1 id="green">Some text</h1>
<p id="green">Some text</p>

? 下面的样式规则将匹配任何一个带有id属性值为"green"的p元素

p#green {color: green}

? 上面的规则与h1元素不匹配(也就是说不会产生样式效果)

<h1 id="green">Some text</h1>

? 和class一样,id的名称的开头也不要使用数字,不然就无法在Mozilla/Firefox中正常运作了

CSS注释

? 你可以在CSS中加入解释代码用的注释,这样可以方便你以后重新编辑代码。浏览器会忽略注释,注释一般以"/*"开头"*/"做结尾,像这样:

/* This is a comment */
p {
    text-align: center;
    /* This is another comment */
    color: black;
    font-family: arial
}

怎么使用CSS

? 怎样插入样式表?
– 当浏览器阅读样式表,它会依据它(样式表)来格式化文档。有三种方法可以插入样式表
? 外部样式表(External Style Sheet)
? 内嵌样式表(Internal Style Sheet)
? 行内样式(Inline Styles)

外部样式表:
? 使用外部样式表是使样式应用于多张网页的理想方法。通过这个方法你只需改动一个文件就能改变整个网站的外观。使用<link>标签让每个页面都连接到样式表。 <link>标签在head区域使用

<head>
<link rel="stylesheet" type="text/css" href="mystyle.css" />
</head>

浏览器将从mystyle.css文件中读取样式定义信息,并依据它来格式化文档

? 外部样式表可以用任何一个文字编辑器来书写。文件不应该包含任何的html标签。并保存为一个后缀为.css的文件.下面是一个样式表文件的内容

hr {color: sienna}
p {margin-left: 20px}
body {background-image:url("images/back40.gif")}

内嵌样式表:

? 一份内嵌样式表应该在当有单独文档有特殊样式的时候使用。使用<style>标签在head区域内定义样式,像这样

<head>
    <style type="text/css">
        hr {color: red}
        p {margin-left: 20px}
        body {background-image: url("images/back40.gif")}
    </style>
</head>

? 浏览器将立即读取样式定义,并依据它来格式化文档。
? 注意:浏览器一般会忽略未知的标签。这就意味着老的浏览器不能支持样式,会忽略<style>标签,但<style>里的内容会显示在页面上。在HTML注释元素中隐藏它
可以来避免这类情况在老的浏览器中发生

行内样式:

? 使用行内样式就失去了样式表的优势而将内容和形式相混淆了。一般这类方法在个别元素需要改变样式的时候使用
? 在相关的标签上用style属性来加入行内样式。样式属性可以包含任何CSS属性。例子中将展示怎样给一个段落加上左间距并将颜色改为red

<p style="color: red; margin-left: 20px"> This is a paragraph </p>
时间: 2024-10-11 10:42:15

CSS相关的相关文章

css相关,鼠标点击&lt;input&gt;输入域后出现有颜色的边框

css相关,鼠标点击<input>输入域后出现有颜色的边框,如果使用css,将这个鼠标点击输入域后产生的边框去掉呢?下面是截图 鼠标未点击前: 鼠标点击后: 根据大家的办法实现不了的,即使可以改变颜色,但是那条有颜色的线还是无法消除.下面是我的html和css代码: html: <input type="text" name="content" id="input_box"> css: #input_box{ border

HTML中CSS相关选择器

1.选择器的分类: 1 h1,h2,h3,h4 { 2 color:red; 3 } 2.派生选择器: 1 li strong{ 2 color:red; 3 } 3.id选择器: 1 1 #red{ 2 color:red; 3 } 4 #green{ 5 color:green; 6 } 8 9 HTML: 10 <p id="red">I am red</p> 11 <p id="green">I am green</

CSS相关知识

CSS的优势: 1:样式表提供了远比HTML多得多的格式化选择. 2:在给网页添加背景的时候,你要确定他要如何平铺(重复等一系列的属性) 3:CSS占用的空间也远比HTML的格式化选项要少得多,加载速度更快 4:可以设置多种样式样式表,更具不同的需求提供不同的风格,样式更加独立 文档类型: 所有网页都是一个doctype(文档类型)开头的,表示网页用哪一种HTML来编写 HTML的工作原理 1:网站的第一行是DOCTYPE声明, 2:<html></html>如果把一个网页比作成一

四十一、CSS相关属性

CSS属性相关 宽和高 width属性可以为元素设置宽度. height属性可以为元素设置高度. 块级标签才能设置宽度,内联标签的宽度由内容来决定. <style> div { height: 50px; width: 100px; } /*给行内标签设置长宽没有任何影响*/ span { height: 50px; width: 100px; } </style> 字体属性 文字字体 font-family可以把多个字体名称作为一个“回退”系统来保存.如果浏览器不支持第一个字体,

css相关问题

1.position  有什么可选值 相对定位: relative 绝对定位: absolute 绝对定位:fixed 默认值: static 从父元素继承position的值:inherit 2.absolute 是相对于谁定位的 相对于 static 定位以外的第一个父元素进行定位. 3.position 的默认值是什么 static 4.a链接的4个常用伪类以及CSS编写顺序 a:link, a:visited a:hover, a:actived 参考资料: http://www.cnb

html/css相关的小技巧(1)

1.a标签的链接顺序,link-visited-hover-focus-active. 2.marquee标签,我之前基本上没有用到过这个标签,在最近的面试中才知道这个标签的强大之处,他可以帮我们实现滚动在固定范围内的上下,左右滚动等效果.marquee有以下几个属性 (1)direction,控制滚动方向,属性值有left,right,up,down; (2)behavior,控制滚动方式,属性值有scroll连续滚动,slide只滚动一次,alternate往返滚动: (3)loop,控制循

L--前端开发面试知识点(CSS相关)

1.display:none和visibility:hidden的区别? display:none 隐藏对应的元素,在文档布局中不再给他分配空间,他各边 的元素会合拢,就当他从来不存在. visibility:hidden 隐藏对应的元素,但是在文档布局中仍保留原来的空间. 2.CSS中的link和@import的区别是? 1.link属于html标签,而@import是CSS提供的: 2.页面被加载时,link会同时加载,而@import引用的css会等到页面加载完在加载: 3.import只

CSS相关知识三

CSS的transform.transition和animation属性 transform属性 (变形) 它是CSS用改变换样式的基础属性,你可以设置这个属性的不同的值,来使样式进行改变 这个属性是比较新的是,所以并不是所有的浏览器都能支持,IE8及之前的浏览器是不支持的. 因此还需要给所有浏览器提供厂商前缀 -webkit-transform: -moz-transform: -o-transform: -ms-transform: 记得注意的特性:这个属性不会对周围的元素产生影响. tra

CSS 相关知识总结

1 什么是CSS? CSS全称(Cascading Style Sheets)是一门指定文档该如何呈现给用户的语言. 2 为何使用CSS? CSS 文档信息的内容和如何展现它的细节想分离,文档细节即为样式(style).你可以将样式与内容进行分离出来,以便我们能够 避免重复 更容易维护 为不同的目的,使用不同的样式而内容相同 3 CSS 如何工作的? 浏览器在展示一个文档内容的时候,必须要把文档和样式信息结合起来展示.这个处理过程一般分为两个阶段: 1 浏览器先将标记语言和CSS转换成DOM(文