博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
CSS样式学习笔记『W3School』
阅读量:6293 次
发布时间:2019-06-22

本文共 2004 字,大约阅读时间需要 6 分钟。

1、

选择器+声明
声明:属性+值
eg:h1{color:red;font-size:14px;}
颜色:
p{color:#ff0000;}
p{color:#f00;}
p{color:rgb(255,0,0);}
p{color:rgb(100%,0%,0%);}
单词时:
p{font-family:"sans serif";}

2、选择器的分组

h1,h2,h3{
color:green;
}
3、继承
body{
font-family: Verdana,sans-serif;
}
如果浏览器不支持继承:
body{
font-family: Verdana,sans-serif;
}
p,td,ul{
font-family:Verdana,sans-serif;
}
摆脱继承:
body{
font-family:Verdana,sans-serif;
}
p{
font-family:Times,"Times New Roman",serif;
}
4、派生选择器
li strong {
font-style:italic;
font-weight:normal;
}
只有在li的strong字体才会应用此格式
<li><strong>在li中的strong</strong></li>
5、id选择器
#red{color:red;}
#green{color:green;}
使用:
<p id="red">红色</p>
<p id = "green">绿色</p>
id在一个页面中事唯一的,想知道原因吗?哈哈!!!
id选择器和派生选择器:
只应用于id为sidebar内的p
#sidebar p{
font-style: italic;
text-align:right;
margin-top:0.5em;
}
单独的选择器:
#sidebar{
border:1px dotted #000;
padding:10px;
}

6、类选择器

.center{text-align:center}
使用:
<h1 class="center">
使用类选择器class,居中
</h1>
<p class="center">
........
</p>
类名不能使用数字

class和派生选择器:

.fancy td{
color:#f60;
background:#666
}
类名为fancy的更大元素内部的表格单元都会起效,即:如果一个<table class = fancy>...则所有的单元格都起效
元素基于类而被选择:
td.fancy{
color:#f60;
background:#666;
}
使用:
<td class = "fancy">
有且仅有类名为fancy的td起效,
7、属性选择器:

[title]

{
color:red;
}
<p title = "任何值">....</p>

[title = "w3c"]

{
color:red;
}
<p title = ""w3c>...</p>

属性和值选择器-多个值(空格分隔):

[title~=hello]
{
color:red;
}
使用:
<p title = "word hello">...</p>
<p title = "hello word">...</p>

连字符分隔:

[lang|=en]{
color:red;
}
使用(以en开头):
<p lang="en">....</p>
<p lang="en-us">...</p>
若为[lang=en]{},则只有<p lang = "en">...</p>

表单样式设置:

input[type = "text"]
{

}

input[type = "button"]
{

}

使用:
<input tyep = "text">.....
<input type = "button">.....

选择器:

[attribute] 用于选取带有指定属性的元素。
[attribute=value] 用于选取带有指定属性和值的元素。
[attribute~=value] 用于选取属性值中包含指定词汇的元素。
[attribute|=value] 用于选取带有以指定值开头的属性值的元素,该值必须是整个单词。
[attribute^=value] 匹配属性值以指定值开头的每个元素。
[attribute$=value] 匹配属性值以指定值结尾的每个元素。
[attribute*=value] 匹配属性值中包含指定值的每个元素。

8、创建:

外部样式表
内部样式表
内联样式

注意多重样式

 

 

 

 

 

 

转载于:https://www.cnblogs.com/sansanboy/p/3477635.html

你可能感兴趣的文章
第58件事 借势文案创作实例
查看>>
域名什么意思?
查看>>
ArcEngine创建要素类01
查看>>
Algs4-1.4.43大小可变的数组与链表
查看>>
hdoj 1058 Humble Numbers(dp)
查看>>
Falsk的模板分配和蓝图、定制错误信息、 和补充
查看>>
03:创建容器常用选项
查看>>
python常用模块(二)
查看>>
简单天气应用开发——解析HeWeather JSON
查看>>
序列总结
查看>>
回调函数
查看>>
getContentLength() 指为 -1 的解决办法
查看>>
尝试u盘重装系统
查看>>
JS随机数生成算法
查看>>
setTimeout 和 throttle 那些事儿
查看>>
iOS开发UI篇—使用嵌套模型完成的一个简单汽车图标展示程序
查看>>
对小米版百度输入法的认知
查看>>
IOS不支持iframe的解决办法
查看>>
回文字符串问题
查看>>
(转)Tomcat7+Redis存储Session
查看>>