目录
特定标签选择器：
<style type="text/css"> ##选择语言类型
p{ ## p （标签）表示 选择器
color：red;
font-family:楷体； ##在“{}”内插入属性
}
</style>
行内样式 基本语法：
<标记 style>
| html文件调用css文件 | <link rel="stylesheet" type="text/css" href="css文件相对路径"/> |
| 设置颜色 | Style="color:green;" |
| 设置字体大小 | font-size:50px; |
| 设置边框 | border：groove； |
| 设置长、宽 | height：50px；、width：30px； |
| 居中对齐 | text-align：center； |
| 设置整个网页的属性 | body{ 各项参数} |
| 首行缩进 | text-indent：2em; |
| 行高 | line-height：1.3; |
| 定义由细到粗 | font-weight：400=normal正常 ，700=bold，900=bolder； |
| 粗体 | font-weight：bold； |
| 文字更细 | font-weight：lighter； |
| 文字更粗 | font-weight：bolder; |
| 设置文字被选中时的样式 | p：：selection选择器{ background-colora:black color:white } ##背景为黑色，选中文字为白色 |
| 首字下沉 | p：：first-letter{ } |
| 设置字体类型 | font-family：”楷体，宋体，黑体“； #表示 先找到谁即设置谁 |
| 设置字体风格（斜体） | font-style：“italic”、“” |
类标签选择器：（单独对某个标签进行设置）
使用自定义的名称，以 . 号作为前缀，然后再通过HTML标签的class属性调用类选择器；且不能以数字开头
" * "选择器表示 通用选择器
第一种：
<style type="text/css">
.one{
font-size:80px;
color:red;
}</style>
<p class="one">我的赣州</p> ##class 对应 .one one可以更改，但开头必须为 "."
<p id="one">我的祖国</p> ## id 对应 #one
| <p class="one two wqd">叶伏天</p> | ##表示此条class拥有三个属性， 且可以单独设置 |
第二种：
<style type="text/css">
h1.one{
font-size:80px;
color:green;
}</style>
<h1 class="one">赣州</h1>
<p class="one">九江</p>
所有标签选择器：（选择所有标签进行设置）
<style type="text/css">
*{ ##选择器用 * 号，则选中所有标签
font-size:80px;
color:green;
}</style>
“+”相邻兄弟选择器：只能相邻 "~"普通兄弟选择器
p+h3{
color:red;
}
<p>香蕉</p>
<h3>苹果</h3>
<h3>橘子</h3>
<p>榴莲</p>
<h3>菠萝</h3>
| 选中：选择器的第一个元素, 选中：选择器的最后一个元素 第一个：first-child 次序：nth-child（序号） 最后一个：last-child | p:first-child{ color:red; } <p>香蕉</p> <p>苹果</p> <p>橘子</p> <p>榴莲</p> <p>菠萝</p> |
后代选择器：
<style type="text/css">
p strong {
font-size: 80px;
color: red;
}
</style>
<p id="a">我的<strong>美丽的</strong>祖国</p>
<p>我的<strong>可爱的</strong>赣州</p>
并集选择器：（多个标签设置）
<style type="text/css">
p,h2,h3{
font-size:50px;
color:green;
}
</style>
</head>
<body>
<p>我和我的祖国</p>
<h1>长津湖</h1>
<h2>我和我的家乡</h2>
<h3>我和我的父辈</h3>
子类选择器
h1 > p{
color：red；
}
<h1>wqdwqd <p>wdsawdsa</p> dwasdaw</h1>
———————————————————————————————————————
浮动与定位
类似盒子一样边距多少：用left，right，top等调整
选择器{ position ：属性值；}
position属性的常用值有四个，分别代表不同的定值
| 自动定位 ( 默认 ) | static |
| 相对定位，相对于其原文档流的位置进行定位 针对原来的位置(标准流时)进行定位，且原来位置保留 | relative |
| 绝对定位，相对于其上一个已经定位的父元素进行定位； 为某个对象进行定位而使用，原来位置不保留 | absolute |
| 固定定位，相对于浏览器窗口进行定位 | fixed |
| 叠放顺序，谁大谁在上 | z-index |
在整个居中的div容器上设置absolute绝对定位，会破坏div的居中
左右边距产生冲突，以左为准
上下边距产生冲突，以上为准
| 给浏览器设置高度，对全局<body>标签设置 |
| 居中 | margin：0 auto |
继承性的优先级是0
当id属性选择器和class选择器发生冲突时，id选择器优先
| 选择器 | 权重优先级 |
| id | 100 |
| class | 10 |
| p | 1 |
相同权重谁离得近谁优先级就高
不继承的属性：( 边框属性、外边距、内边距、
背景属性、定位属性、布局属性、元素的高度和宽度 )
扫一扫
543
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
