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 学习HTML-CSS-JS 学习HTML-CSS-JS 学习HTML-CSS-JS 学习 HTML-CSS-JS 学习HTML-CSS-JS 学习HTML-CSS-JS 学习HTML-CSS-JS 学习 HTML-CSS-JS 学习HTML-CSS-JS 学习HTML-CSS-JS 学习HTML-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。如果你还没有，可以从官方网站下载并安装。安装...
在这个配置中，`css-loader`负责将CSS模块化，`style-loader`将CSS注入到HTML中，而`typed-css-modules-loader`则生成对应的.d.ts类型定义文件。`localIdentName`选项用于自定义CSS模块的本地标识符命名规则。 当这...
【标题】"html-css-网页模板-团队介绍" 指的是一个基于HTML和CSS设计的网页模板，专门用于展示团队成员的介绍。这个模板可能包含各种页面元素和布局，如团队成员的照片、简介、职位、联系方式等，帮助网站访客了解一...
全面的html-css-javascript讲义
在这个“HTML---CSS----基础知识及代码----各种小程序网页设计”主题中，我们将深入探讨这两门语言的核心概念、语法以及在创建小程序和网页设计中的应用。 首先，HTML是一种标记语言，它定义了网页的内容结构，如...
例如，配合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技术设计的用于展示美食主题的网页模板。这个模板可能包含了一系列精心布局和设计的页面，旨在为用户提供一个吸引人的在线平台来展示美食图片、食谱或者...
`laravel-mail-css-inliner` 是一个Laravel的扩展包，它旨在帮助开发者将CSS内联到HTML邮件中，以确保邮件在各种邮件客户端中保持一致的样式显示。这是因为许多邮件客户端（如Gmail、Outlook）会默认阻止外部样式表...
标题 "html-css-网页模板-产品介绍-自行车" 暗示了这是一个关于使用HTML和CSS构建的网页模板，主要用于展示自行车产品。这个模板可能是为了帮助网站开发者快速创建一个具有吸引力且功能完整的自行车产品介绍页面。...
`get-css-urls`是一个开源库，专为开发者提供了一种高效的方法，用于从CSS字符串中提取URL链接。这个库主要服务于那些需要解析、操作或处理CSS文件中的URL的场景，比如静态资源的自动化构建流程、CDN部署或者CSS预...
【标题】"do-it-html-css-源码.rar" 指的是一份包含HTML和CSS源码的压缩文件，这通常意味着它是一个教学资源或项目示例，用于帮助学习者理解如何构建网页或实现特定的网页设计。HTML（HyperText Markup Language）是...
《CSS经典练习——css-diner-develop深度解析》 在IT领域，HTML前端和CSS是构建网页界面的基础。其中，CSS（层叠样式表）尤为重要，它...因此，如果你在学习HTML前端和CSS的路上，"css-diner-develop"绝对值得一试。
使用指南可能涵盖如何在HTML中引入CSS文件，以及如何通过CSS选择器来选择和修改特定国旗的样式。 在实际开发中，这个项目可以广泛应用于各种场景，如用户地理位置显示、多语言切换菜单、国际会议展示等。同时，由于...