0301 css
网页设计者曾经对控制 网页元素非常苦恼
CSS诞生了
代码重用了
不要记什么,了解一下,然后IDE给你记忆
用VS,鼠标放 body 里
然后到 属性 窗口
点style ...
就可以看见'样式生成器'了
自动提示也不错哦
设置CSS的几个方法
★1
inline styles[内联样式表]
就是直接设置 元素的 style 属性
最新标准说,如果要这样设置,最好在
head里加
<meta http-equiv="Content-Style-Type"
content="text/css"/>
因为text/xsl也可以 修饰 XML了
inline styles这个缺点就是 输出什么屏幕 打印机
乱七八糟的时候,没有办法把CSS去掉,写死了!
写到其他地方么可以用
media [指定此网页输出到什么 煤体上 才用你的资源]
计算机屏幕
打印机
screen[默认] print projection aural braille[xiazi] tty tv all
过滤一下!!!!
★2
[潜入样式表][缺点就是没有办法用到整个网站,不是单张网页]
现在来了,可以解决上面的不足了
<head>
<style type="text/css" media="screen,projection">
<!--
P {....}
-->
</style>
说明:这里的样式只有此文档输出到screen,projection才有用
注释是怕老的 IE,把你写的样式 统统 输出来,呵呵
但是它看得懂注释,呵呵,
JS也是同样道理
CSS基本规则:
selector {property:value;property:value;.....}
如果某个属性有多个值 有空格 隔开
有三种选择器:
1.html tag
2. class
3. id
★3
[外部样式表]*.css
<html>
<head>
<link rel="stylesheet" href="tt.css" type="text/css" media="screen">
</head>
<body>
<p>ddd</p>
</body>
</html>
★4
[输入样式表]
@import
把一个CSS 输入到 另一个CSS
也可以把CSS输入到<style></style>里
e.g.
<style type="text/css" media="screen,projection">
<!--
@import url(http://www.ss.com/style.css);
@import url(/fold/styl.css);
p{xxx:yyy;xx....}
-->
</style>
注意:@import 必在前
还可以自己定义
自己定义可以覆盖 import
===========================
0302 css
CSS设置
1
HTML selector
P {....} 这个就不多说了
---------------------------------
2
class selector [class的名字要根据 功能来起]
这个呢?要换一下概念了
class是类,
第一层意思是:某个 标签 的类[这个是初衷]
第二层意思是:同属一个类的 标签[这个是先入我脑的记忆]
文字上肯定理解不了,看个例子:
<p class="stop">paragraph1</p>
<p class="warning">paragraph2</p>
<p class="normal">paragraph3</p>
这就是一个标签 的三个类
<style>
p.stop {color:red;}
p.warning {color:yellow;}
p.normal {color:green;}
</style>
第二层意思
<style>
.blueone {color:blue;}
</style>
<h1 class="blueone">xxxx</h1>
<p class="blueone">xxxx</p>
-----------------------------------
3
ID selector
class是说一类,这个呢?是说某一特点的元素
用的不是很多,但是也有人非常喜欢用
ID在IT里都是指唯一的
例如:
<span id="yellowone" >text here</span>
<style>
<!--
#yellowone { color:yellow;}
-->
</style>
ID 选择器的经验:
只能为单个HTML标签元素设置样式规则,
因此有一定的局限性,在CSS里应该少用.
但是,JS和CSS-P[主要用里定位的]可以根据
ID来操纵和定位这个HTML元素,所以,
ID属性在JS里会广泛使用
什么时候用ID,什么时候用内联 样式呢??
---------------------------------------------
最主要的就是上面三类
还有三类不常用，了解一下好了
★关联选择器
看那个 类选择器的第一层意思!
对应的 第二层 叫 独立选择器!
这个还有情况:
p em {color:red;}
[ p em ] 就是关联选择器
就是说,出现在 p 里的em 会红色显示,其他地方em就不知道了
这个的优先权比单一选择器高![这话看不懂正常,看例子]
假如已经有上面的定义
再定义了
em {color:yellow;}
这个没有上面的厉害,出现在 p 里的em 会红色显示,其他地方em就应该是黄色的了
★组合选择器
这个非常简单
减少重复声明而已
h1,h2,h3,h4,h5,h6,td {color:red;}
逗号隔开!!
★伪元素选择器
这个是对同一个元素的各种状态和其所包含的部分内容的一种定义方式.
如:对于<a></a>的各种状态
对于段落首字母 和 首行
HTML元素:伪元素{属性:值}
a:active [点饥]
a:hover [移上去]
a:link [正常状态]
a:visited [点过的状态]
p:first-line
p:first-letter
first-line
first-letter
这两个可以用在 任何 块级元素上!!
最后:
类选择器 和 伪元素 一起使用的格式
HTML元素.类名:伪元素 {属性: 值}
这个应该可以理解吧!!!
=========================
0303 css
注释 有效范围
注释就一种 /**/
看看范围
所有潜逃的某个HTML标签的HTML标签都会继承外
层标签设置的样式规则
样式规则的优先级
1就近原则!
2 ID选择器 > CLASS选择器 > HTML选择器
3 内联样式表 > 潜入样式表 > 外部样式表
=======================
0303 css
CSS样式分类
1
字体
2
背景
3
文本
4
位置
这个就是CSS-P
position: absolute relative static
left
top
width
height
z-index 值大在上
5
布局
6
边缘
7
列表
8
其他
太多了,没有人可以记得的,还是在电脑上安装VS吧!
里面有个样式生成器的
=======================
0304 css
CSS filter
太多了,没有必要去记得，
MSDN
search filter
还有演示呢!
也可以去弄个 chm文件看看!
没有必要去记得!
在MSDN里,有个'同步内容'的按牛,很好!
可是我的2005里找不到!!
我崇拜的一个IT界的老师张肖像说了这样一句话:
苦干不如巧干,最聪明的人,是最会用工具的人,
我要补充说,最聪明的人,是自己发明工具,自己用的人!
也要会 获取 优秀网页的CSS和JS!
应该用的!
=============
分享到：
相关推荐
html css js网页设计 tour-website-html-css-master.zip tour-website-html-css-master.zip tour-website-html-css-master.zip tour-website-html-css-master.zip tour-website-...html-css-master.zip
学习笔记HTML-css-JS.zip学习笔记HTML-css-JS.zip学习笔记HTML-css-JS.zip 学习笔记HTML-css-JS.zip学习笔记HTML-css-JS.zip学习笔记HTML-css-JS.zip 学习笔记HTML-css-JS.zip学习笔记HTML-css-JS.zip学习笔记...
html-css-js学习过程中的知识点html-css-js学习过程中的知识点 html-css-js学习过程中的知识点html-css-js学习过程中的知识点 html-css-js学习过程中的知识点html-css-js学习过程中的知识点 html-css-js学习过程中的...
"HTML-CSS-JS Prettify"就是这样一个插件，专为格式化HTML、CSS和JavaScript代码而设计。** **在安装"HTML-CSS-JS Prettify"插件之前，确保你已经拥有Sublime Text。如果你还没有，可以从官方网站下载并安装。安装...
【标题】"html-css-网页模板-团队介绍" 指的是一个基于HTML和CSS设计的网页模板，专门用于展示团队成员的介绍。这个模板可能包含各种页面元素和布局，如团队成员的照片、简介、职位、联系方式等，帮助网站访客了解一...
HTML-CSS-JS Prettify 是一个用于代码美化和格式化的工具，主要针对HTML、CSS和JavaScript这三种前端开发中最常用的编程语言。这个工具的主要目的是提高代码的可读性和一致性，使得开发者在编写和阅读代码时能有更佳...
全面的html-css-javascript讲义
例如，配合Webpack的`css-loader`和`style-loader`，可以实现CSS模块的加载和注入到HTML中。 ### 6. 注意事项 - 虽然CSS模块化有助于减少样式冲突，但仍然需要谨慎编写样式，避免过度嵌套和冗余。 - 如果某个组件...
4. **样式隔离模式**：使用CSS预处理器（如Sass或Less）创建模块化的CSS，通过嵌套规则和变量避免样式冲突。 5. **CSS动画模式**：利用`@keyframes`定义动画，并通过`animation`属性将动画应用到元素，创建丰富的...
"Laravel开发-laravel-html-css-inliner"项目正关注于这个领域，它提供了一种方法，可以将外部CSS内联到HTML元素中，这样可以确保样式在不支持外部CSS链接的环境（如邮件客户端）中正确显示。 首先，我们要理解为...
【标题】"html-css-网页模板-美食"指的是一个基于HTML和CSS技术设计的用于展示美食主题的网页模板。这个模板可能包含了一系列精心布局和设计的页面，旨在为用户提供一个吸引人的在线平台来展示美食图片、食谱或者...
ie-css3.htc是一种行为复合内容（Behavior Composite Content）文件，它是微软在Internet Explorer中引入的一种技术，允许HTML元素通过链接外部的HTC文件来实现某些特定的脚本功能。在本例中，ie-css3.htc是一个...
【标题】"do-it-html-css-源码.rar" 指的是一份包含HTML和CSS源码的压缩文件，这通常意味着它是一个教学资源或项目示例，用于帮助学习者理解如何构建网页或实现特定的网页设计。HTML（HyperText Markup Language）是...
4. **布局技术**：CSS提供了多种布局方式，如浮动布局（`float`）、定位（`position`）、Flexbox（弹性盒布局）和Grid（网格布局）。这些技术用于创建复杂的响应式设计，适应不同设备和屏幕尺寸。 5. **响应式设计*...
《CSS经典练习——css-diner-develop深度解析》 在IT领域，HTML前端和CSS是构建网页界面的基础。其中，CSS（层叠样式表）尤为重要，它...因此，如果你在学习HTML前端和CSS的路上，"css-diner-develop"绝对值得一试。
使用指南可能涵盖如何在HTML中引入CSS文件，以及如何通过CSS选择器来选择和修改特定国旗的样式。 在实际开发中，这个项目可以广泛应用于各种场景，如用户地理位置显示、多语言切换菜单、国际会议展示等。同时，由于...
day01-HTML-CSS-JavaScript
在本压缩包“html5-css-3d.rar”中，重点展示了CSS3的3D转换特性，用于创建引人注目的3D图形和动画效果。这个示例项目名为"css3-3d-tetra"，可以推测它可能是一个利用CSS3 3D变换技术构建的四面体（tetra）图形的...
【标题】"html-css-spotifyweb-源码.rar"揭示了这个压缩包包含的是与HTML和CSS相关的源代码，可能是对Spotify网页版的一种仿制或解析。这为我们提供了一个学习和研究网页设计，特别是音乐流媒体平台界面设计的宝贵...
4. **前端开发工具集合**（[http://www.qianduan.net/css3-development-tools-collection.html](http://www.qianduan.net/css3-development-tools-collection.html)） - 收集了一系列常用的前端开发工具，包括用于...