首页 / CSS / web前端day-05css样式
web前端day-05css样式
内容导读
互联网集市收集整理的这篇技术教程文章主要介绍了web前端day-05css样式，小编现在分享给大家，供广大互联网技能从业者学习和参考。文章包含4537字，纯文字阅读大概需要7分钟。
内容图文
W3C组成
结构html，表现css，行为javascript
css基本语法
一、 建立与css的联系
<head>
<meta charset="UTF-8">
<title>Title</title>
<link rel="stylesheet" href="css/test1.css">
</head>
<body>
在css里面设置格式
二、css的四种引入方式
<!-1.嵌入式（行嵌式）,写在标签内–>
p style="color:red;font-size: 30px;">欢迎来到羊驼老师课堂</p>
<!-2.内部样式表：一般写在中的title后面，必须将样式包含在中–>
<style>
.p2{
color:blue;
font-size: 50px;
}
</style>
</head>
<body>
<p class="p2">欢迎来到羊驼老师课堂</p>
<!-3.外部样式表：–>
<head>
<meta charset="UTF-8">
<title>Title</title>
<link rel="stylesheet" href="css/p3.css">
</head>
<body>
<p class="p3">欢迎来到羊驼老师课堂</p>
<!-4.@import引入–>本质上与第三种相像
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
@import "css/p4.css";
</style>
</head>
<body
<p class="p4">欢迎来到羊驼老师课堂</p>
</body>
</html>
三、css选择器
<style>
* { /*初始化，盒模型会讲到*/
padding: 0;
margin: 0;
}
</style>
1.通配符选择器*匹配所有标签，慎用
2.标签选择器 p div a…
<head>
<style>
p {
color: red;
font-size: 30px;
}
</style>
</head>
<body>
<p>欢迎来到羊驼老师课堂</p>
</body>
3.类选择器
<head>
<style>
.p1 {
color: red;
font-size: 30px;
}
</style>
</head>
<body>
<div class="p1">我是p1</div>
</body>
4.id选择器
<head>
<style>
#p1 {
color: red;
font-size: 30px;
}
</style>
</head>
<body>
<p class="p1" id="p1">我是pppppppp</p>
</body>
5.派生选择器：通过依据元素在其位置的上下文关系来定义样式，你可以使标记更加简洁。
strong {
color: red;
}
h2 {
color: red;
}
h2 strong {
color: blue;
}
<p>The strongly emphasized word in this paragraph is<strong>red</strong>.</p>
<h2>This subhead is also red.</h2>
<h2>The strongly emphasized word in this subhead is<strong>blue</strong>.</h2>
显示效果：
6.选择器分组
<style>
/* .p1{
color:red;
}
.p3{
color:red;
}*/
/*等同于上面的写法：选择器分组，用逗号隔开*/
.p1,.p3{
color:red;
}
</style>`
7.选择器的继承（.wrapper装饰）
<style>
.wrapper{
width:100%;height: 500px;
}
p{ /*p的宽度会继承wrapper*/
background-color: #f00;
}
</style>
</head>
<body>
<div class="wrapper">
<p>dddddddddddd</p>
</div>
</body>
8.选择期里面元素的优先级
<style>
（其次是id）#p1{
color:blue;
}
（最后是类）.p1{
color:red;
}
</style>
</head>
<body>
<p class="p1" id="p1" style="color: green（里面优先级最高）;">我是pppppppp</p>
例子：
<style>
#wrapper div.main h2{
color:red;
}
#wrapper .main h2{
color:blue;
}
</style>
</head>
<body>
<div id="wrapper">
<div class="main">
<h2>这是一个h2标题</h2>
</div>
</div>
9.补充：元素之间的共用
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.red{
background-color: red;
}
.blue{
color: blue;
}
</style>
</head>
body>
<div class="red blue">我是div</div>
</body>
css字体样式
p {
/*font-size: 20px;*/
/*font-size: 20pt;*/
font-size: 50%; /*相对于父级元素*/
font-family: 微软雅黑,华文行楷, 楷体; /*优先顺序排列，前一个没有的，后面的顶上*/
/*font-style: normal;*/
/*font-style: italic;*/
font-style: oblique;
/*font-weight: bold;*/ /*粗体*/
/*font-weight: bolder;!*比bold粗*!*/
/*font-weight: lighter;!*比normal细*!*/
/*可以通过数字100-900来表示粗细，400等同于normal,700等于bold*/
font-weight: 100;
/*color:red;*/
/*color: #ff0000;*/
/*color: #f00; !*等同于上面写法*!*/
color: rgb(255,0,0); /*等同于上面写法*/
background-color: rgba(0,255,255,0.2);
/*行高*/
/*line-height: 40px;*/
line-height: 5; /*两倍行高*/
}
a{
/*下划线*/
text-decoration: none; /*取消下划线*/
color:#000; /*黑色*/
}
a:hover{ /*悬停时触发*/
/*text-decoration: underline;*/ /*下划线*/
/*text-decoration: overline; !*上划线*!*/
text-decoration: line-through; /*中间穿*/
color:#f00;
}
</style>
css设置对其方式：
<style>
.p{
width:400px;
height:200px;
text-align: center; /*居中显示*/
/*text-align: right; !*右对齐显示*!*/
/*text-align: left; !*右对齐显示*!*/
line-height: 250px;
background-color: #f00;
}
.td{
text-align: center;
vertical-align: top;
}
</style>
</head>
<body>
<p class="p">这是一个p</p>
<!--table[border=1]>tr*2>td{dddd$$}*4-->
<table border="1" width="500px" height="200px;">
<tr>
<td>dddd01</td>
<td class="td">dddd02</td>
<td>dddd03</td>
<td>dddd04</td>
</tr>
<tr>
<td>dddd01</td>
<td class="td">dddd02</td>
<td>dddd03</td>
<td class="td">dddd04</td>
</tr>
</table>
</body>
显示效果：
text-transform转换大小写：
<style>
p {
text-transform: capitalize; /*首字母大写*/
}
p {
text-transform: uppercase; /*全部转换为大写*/
}
p {
text-transform: lowercase; /*全部转换为小写*/
}
</style>
text-indent首行缩进;
<body>
<!--<p style="text-indent: 40px;">-->
<!--字号，斜体，行高 字体形式-->
<p style="text-indent: 2em;font:bolder italic 25px 华文行楷;">记录卡就赶快拉几公里可贷款宫颈癌考虑过
加大卡率较高卡拉胶隔开了
加大卡率较高卡拉胶隔开了
加大卡率较高卡拉胶隔开了
加大卡率较高卡拉胶隔开了
加大卡率较高卡拉胶隔开了
加大卡率较高卡拉胶隔开了
内容总结
以上是互联网集市为您收集整理的web前端day-05css样式全部内容，希望文章能够帮你解决web前端day-05css样式所遇到的程序开发问题。 如果觉得互联网集市技术教程内容还不错，欢迎将互联网集市网站推荐给程序员好友。
内容备注
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 gblab@vip.qq.com 举报，一经查实，本站将立刻删除。
内容手机端
扫描二维码推送至手机访问。
来源：【匿名】