css学习

嗼莣初衷 發表於 2021-3-22 17:09:00

<h1 id="1-webstorm的安装">1. webstorm的安装</h1>
<blockquote>
<p>https://www.jetbrains.com/webstorm</p>
</blockquote>
<hr>
<h1 id="2-编写网页的神器emmnet表达式">2. 编写网页的神器(emmnet表达式)</h1>
<pre><code class="language-shell">+: 同级
>:下一级
</code></pre>
<hr>
<h1 id="3-css">3. css</h1>
<p>css: 层叠样式表,级联样式表</p>
<hr>
<h1 id="4-css的引入方式">4. CSS的引入方式</h1>
<h2 id="41-内联方式引入样式">4.1 内联方式引入样式</h2>
<pre><code class="language-css"><span style="color:red; font-size: 120px">我是中国人</span>
</code></pre>
<p>优点: 使用简单</p>
<p>缺点: 属性要是太多不方便修改,没有做到内容与样式相分离</p>
<blockquote>
<p>这种方式只适合在测试环境写少量的样式</p>
</blockquote>
<hr>
<h2 id="42-内部方式引入样式">4.2 内部方式引入样式</h2>
<pre><code class="language-css"><style>
span {
   color: red;
   font-size: 30px;
}
</style>
</code></pre>
<p>优点: 把当前页面多有的css可以写在一块了</p>
<p>缺点: 没有实现完全的 <code>内容与样式相分离</code></p>
<blockquote>
<p>只是适合在测试环境使用</p>
</blockquote>
<hr>
<h2 id="43-外部方式引入样式">4.3 外部方式引入样式</h2>
<pre><code class="language-css">
<link href="./base.css"rel="stylesheet">
</code></pre>
<p>优点: 内容与样式彻底分离,可以按需引入</p>
<blockquote>
<p>可以在生产环境直接使用</p>
</blockquote>
<hr>
<h1 id="5-css中的颜色的写法">5. CSS中的颜色的写法</h1>
<ul>
<li>常用的颜色可以写英文</li>
<li>16进制的颜色值的写法</li>
<li>RGB颜色值的写法</li>
<li>RGBA的写法(带透明度的写法);最后一个值是透明度0-1,之间的小数;</li>
</ul>
<hr>
<h1 id="6-css中的选择器的分类">6. CSS中的选择器的分类</h1>
<p><img src="upload/image-20210118093320085.png" alt="image-20210118093320085" loading="lazy"></p>
<hr>
<h1 id="7-css基本的选择器">7. CSS基本的选择器</h1>
<h2 id="id选择器">ID选择器</h2>
<pre><code class="language-css">#id值{
属性名称:属性值;
....
}
</code></pre>
<h2 id="class选择器">Class选择器</h2>
<pre><code class="language-css">.类名{
属性名称:属性值;
....
}
</code></pre>
<h2 id="标签选择器">标签选择器</h2>
<pre><code class="language-scss">.标签名称{
属性名称:属性值;
....
}
</code></pre>
<hr>
<h1 id="8-css的高级选择器">8. CSS的高级选择器</h1>
<h2 id="分组选择器">分组选择器</h2>
<pre><code class="language-shell">选择器1,选择器2,...{
CSS属性名称:属性值;
...
}
</code></pre>
<h2 id="子类选择器">子类选择器</h2>
<pre><code class="language-css">父选择器>子选择器{
CSS属性名称:属性值;
...
}
</code></pre>
<h2 id="后代选择器">后代选择器</h2>
<pre><code class="language-css">父选择器后代选择器{
CSS属性名称:属性值;
...
}
</code></pre>
<h2 id="兄弟选择器">兄弟选择器</h2>
<pre><code class="language-css">#d1~li{
color: red;
}
</code></pre>
<p>兄弟选择器选择的是从当前元素<strong>后面</strong>的<code>所有兄弟</code></p>
<h2 id="相邻兄弟选择器">相邻兄弟选择器</h2>
<pre><code class="language-css">#d1+li{
color: red;
}
</code></pre>
<p>相邻兄弟选择器选择的是从当前元素<strong>后面</strong>的<code>第一个兄弟</code></p>
<h2 id="过滤选择器">过滤选择器</h2>
<pre><code>h1.box2{
color: red;
}
</code></pre>
<p>ps: h1与.box2中间没有<code>空格</code>的</p>
<h2 id="属性选择器">属性选择器</h2>
<pre><code class="language-css">/*包含name属性的选择器*/
input{
background-color: #ccc;
}
</code></pre>
<pre><code class="language-css">/*选择属性name='age'的input*/
input{
background-color: #ccc;
}
</code></pre>
<h2 id="通配符选择器了解">通配符选择器(了解)</h2>
<pre><code class="language-css">/*选择所有元素*/
*{

}
</code></pre>
<h2 id="伪类选择器">伪类选择器</h2>
<pre><code class="language-css">/*鼠标划过的效果*/
a:hover{
color: pink;
}
</code></pre>
<h2 id="伪元素对象选择器">伪元素(对象)选择器</h2>
<pre><code class="language-css">.box::before {
content: "前面加的内容";
}
</code></pre>
<pre><code class="language-css">.box::after{
content: "后面加的内容";
}
</code></pre>
<h2 id="ccs3中新增的选择器">CCS3中新增的选择器</h2>
<pre><code class="language-css">/*第一个子元素*/
ul > li:first-child {
color: red;
}
</code></pre>
<pre><code class="language-css">/*最后一个子元素*/
ul>li:last-child{
color: red;
}
</code></pre>
<pre><code class="language-css">/*选择第二个子元素*/
ul>li:nth-child(2){
color: #f00;
}
</code></pre>
<pre><code class="language-css">/*选择偶数行*/
ul>li:nth-child(2n){
color: #f00;
}
</code></pre>
<pre><code class="language-css">/*选择奇数行*/
ul>li:nth-child(2n+1){
color: #f00;
}
</code></pre>
<pre><code class="language-css">/*nth-of-type可以忽略中断结构的元素*/
ul>li:nth-of-type(2){
color: red;
}
</code></pre>
<hr>
<h1 id="9-css选择器的优先级">9. css选择器的优先级</h1>
<ul>
<li>CSS后面的样式覆盖前面的样式(相同权重下)</li>
<li>id选择器>class选择器>标签选择器</li>
</ul>
<hr>
<h1 id="10-css的宽高属性">10. CSS的宽高属性</h1>
<pre><code class="language-css">width: 200px;
height: 200px;
</code></pre>
<hr>
<h1 id="11-前端开发调试神器google开发者工具箱">11. 前端开发调试神器(google开发者工具箱)</h1>
<pre><code class="language-shell">f12
ctrl+shift+i
右键--->检查
</code></pre>
<hr>
<h1 id="12-字体属性">12. 字体属性</h1>
<pre><code class="language-css">span {
font-size: 18px; /*字体大小*/
color: red; /*字体颜色*/
font-family: "PingFang SC", Arial, "Microsoft YaHei", sans-serif; /*字体的家族*/
font-style: italic; /*字体样式italic:斜体*/
font-weight: bolder; /*bolder:粗体lighter:细体 ,还可以是具体的磅数 */
}
</code></pre>
<hr>
<h1 id="13-列表属性">13. 列表属性</h1>
<pre><code class="language-css">ul{
/*去除列表前面的原点或者数字*/
list-style: none;
}
</code></pre>
<hr>
<h1 id="14-链接文本属性">14. (链接)文本属性</h1>
<pre><code class="language-css">text-decoration-color: red; /*线条颜色*/
text-decoration-line: line-through; /*线条类别line-through:穿过文本的线*/
text-decoration-style: dashed; /*solid:默认(实线) dashed:虚线 */
</code></pre>
<pre><code class="language-css">text-decoration: none; /*去掉下面的线*/
</code></pre>
<hr>
<h1 id="15-背景属性">15. 背景属性</h1>
<pre><code class="language-css">width: 100px;
height: 100px;
/*background-color: pink; !*背景颜色*!*/
/*background-image: url("./images/mm.jpg");*/
/*background-repeat: no-repeat; !*背景图片的平铺方式默认是平铺的*!*/
/*background-size: 400px 200px; !*写一个值:代表的是宽度,此时的高度自动根据宽度的比例伸缩;写两个值就是固定的背景图片大小*!*/
background-image: url("./images/xbt.jpg");
background-repeat: no-repeat;
/*background-size: 10px 10px;*/
background-size: cover;
background-position: 71px 68px; /*背景的偏移量*/
</code></pre>
<hr>
<h1 id="16-行高属性">16. 行高属性</h1>
<pre><code class="language-css">width: 400px;
height: 100px;
background: pink;
line-height:100px;/*行高等于父元素的高度,则字体在竖直方向居中*/
</code></pre>
<hr>
<h2 id="17-文本的对齐方式">17. 文本的对齐方式</h2>
<pre><code class="language-css">h1 {
text-align: center;/*元素中的文本("我要学习Java大数据")相对元素("h1")的对齐方式*/
}
</code></pre>
<hr>
<h1 id="18-盒子模型">18. 盒子模型</h1>
<p>在html中,所有的元素都是一个盒子;</p>
<h2 id="181-边框属性border">18.1 边框属性(border)</h2>
<pre><code class="language-css">border-bottom: 2px solid green;
border-top: 20px solid green;
border-left: 2px solid green;/*简写*/
/*border-color: red; !*边框颜色*!*/
/*border-width: 20px;!*边框宽度*!*/
/*border-style: solid;!*边框样式*!*/
/*border: 10px solid red;*//*简写*/
</code></pre>
<hr>
<h2 id="182-内边距padding">18.2 内边距(padding)</h2>
<pre><code class="language-css">/*padding-top: 20px;*/ /*上内边距*/
/*padding-bottom: 20px;*/ /*下内边距*/
/*padding-left: 30px;*/ /*左内边距*/
/*padding-right: 30px;*/ /*右内边距*/

/*一个值:代表上下左右
两个值: 第一个值代表上下内边距,第二个值代表的是左右内边距
三个值: 上左右下
四个值: 上右下左
*/
padding: 40px 30px 50px 80px;
</code></pre>
<h2 id="183-外边距margin">18.3 外边距(margin)</h2>
<p>margin用法和padding一样</p>
<pre><code class="language-css">margin-top: 20px;/*上外边s距*/
margin-left: 40px;/*左外边距*/
</code></pre>
<hr>
<h2 id="184-盒子的大小配置">18.4 盒子的大小配置</h2>
<pre><code class="language-css">/*content-box: 默认的属性,加上内边距和边框会撑大盒子
border-box: 加上内边距和边框不会撑大盒子,会压缩内容大小
*/
box-sizing: border-box;
</code></pre>
<hr>
<h1 id="19-css中的元素的分类">19. CSS中的元素的分类</h1>
<ul>
<li>行内元素: 默认宽度是包裹内容的,不能设置宽高,不会独占一行; eg: span i,a</li>
<li>快级元素(快元素): 默认的宽度是填充父元素的,能设置宽高的,会独占一行: divul..</li>
<li>行内块级元素(行内快元素): 默认宽度是包裹内容的,能设置宽高,不会独占一行:inputimg</li>
</ul>
<hr>
<h1 id="20-css中的浮动">20. CSS中的浮动</h1>
<p>文档流: 文档从上而下或者从左往右的排列方式</p>
<ul>
<li>浮动的元素会脱离标准的文档流</li>
<li>设置了浮动的元素会变成<code>行内块级元素</code></li>
</ul>
<pre><code class="language-css">设置浮动:
   float: left|right;
</code></pre>
<pre><code class="language-css">清除浮动(最low的一种方式):
clear:both;
</code></pre>
<hr>
<h1 id="21-手动改变元素的类型">21. 手动改变元素的类型</h1>
<pre><code class="language-css">display: inline-block;
none:隐藏元素
block:块级元素
inline-block:行内块级元素
inline: 行内元素
</code></pre>
<hr>
<h1 id="22-css中的定位">22. CSS中的定位</h1>
<h2 id="相对定位">相对定位</h2>
<pre><code class="language-css">position: relative;/*配置定位方式*/
left: 30px;
top: 100px;
</code></pre>
<p><strong>相对定位元素不会脱离标准的文档流,以自身为参照进行定位的</strong></p>
<h2 id="绝对定位">绝对定位</h2>
<pre><code class="language-css">position: absolute;
top: 0px;
</code></pre>
<p><strong>脱离标准的文档流,定位时首先会看父元素有无设置定位,如果设置了定位就以父元素为参照进行定位,如果没有设置定位方式,依次向上查找,直到找到设置定位方式的元素位置,如果都没有找到,则以body为参照进行定位</strong></p>
<p><code>父相子绝</code></p>
<h2 id="固定定位">固定定位</h2>
<pre><code class="language-css">position: fixed;
top: 20px;
</code></pre>
<p><strong>脱离标准的文档流,永远以浏览器的窗口为参照进行定位</strong></p>
<hr>
<h1 id="23-css中的浮动和定位的使用建议">23. CSS中的浮动和定位的使用建议</h1>
<ul>
<li>在实际的开发中 <code>能不使用浮动坚决不使用浮动</code>,因为浮动会破坏标准的文档流,而且浮动之后元素不方便控制;</li>
<li>定位要遵循 <code>父相子绝</code>的方式来使用,这样方便我们进行定位控制;</li>
</ul>
<hr>
<h1 id="24-网页布局">24. 网页布局</h1>
<ul>
<li>最原始的时候用table做布局</li>
<li>现在我们一般使用div+css做布局</li>
<li>弹性盒模型布局</li>
</ul>
<hr>
<h1 id="25-弹性盒模型布局">25. 弹性盒模型布局</h1>
<p>弹性盒模型布局也称为<code>flex布局</code></p>
<p>把一个元素设置为弹性盒子之后,盒子里面的元素都会变成 <code>行内块级元素</code></p>
<pre><code class="language-css">display: flex;/*把当前元素设置为弹性盒子*/
flex-wrap: wrap; /*box里面的内容如果超过其弹性盒子的宽度之后是否折行显式*/
flex-direction: row; /*盒子里面的内容的排列方向row column */
justify-content: center;/*主轴上的元素的对齐方式*/
align-items: center; /*副轴上的元素的对齐方式*/
</code></pre>
<hr><br><br>
来源：https://www.cnblogs.com/yuliang520/p/14566772.html

頁: [1]

琼殿技术论坛's Archiver

css学习