css基础

作者: 键盘已附魔 | 来源:发表于2021-09-09 10:53 被阅读0次

CSS学习资源
【2016年特别福利】史上最全CSS学习资料大全
react学习路线图
CSS初识
css大纲
CSS第一小节第一天
CSS第一天
史上最全的HTML、CSS知识点总结，浅显易懂。适合入门新手，需
史上最全的HTML、CSS知识点总结，浅显易懂。
前端入门系列

类选择器改样式，

<style>

        p {
            color: burlywood;
            font-size: 100px;
        }
        
        .bian {
            color: blue;
        }
        
        .se {
            color: brown;
        }
        
        .long {
            color: chartreuse;
        }
    </style>

</head>

<body>
    <ul >
        <li class="bian">asdfasdf</li>
        <li class="se">asdfasdfasfd</li>
        <li class="long">asdfafa</li>
    </ul>
</body>

类选择器画盒子

 <style>
        .red {
            width: 100px;
            height: 100px;
            background-color: crimson;
        }
        
        .green {
            width: 100px;
            height: 100px;
            background-color: darkgreen;
        }
    </style>
</head>

<body>
    <div class="red">红色</div>
    <div class="green">绿色</div>
    <div class="red">红色</div>

</body>

多类名

给一个标签取多个类名，修改类属性，所有同名标签一起改变，节省代码量

<style>
        .xingqi {
            color: blue;
        }
        
        .zhoumo {
            font-size: 50px;
        }
    </style>

</head>

<body>
    <div class="xingqi">星期一</div>
    <div class="xingqi">星期二</div>
    <div class="xingqi">星期三</div>
    <div class="xingqi">星期四</div>
    <div class="xingqi">星期五</div>
    <div class="xingqi zhoumo">星期六</div>
    <div class="xingqi zhoumo">星期天</div>


</body>

id选择器

类选择器class好比人名，可以和别人重名，可以拥有多名称
ID是身份证号，只能一个人用一个，只能调用一次。

 #yizhou {
            color: chartreuse;
        }
<div id="yizhou">一周</div>

通配符选择器

{
属性：值
}
选取页面所有元素，修改属性。

css字体属性

<style>
        p {
            /* 修改字体 */
            font-family: 'Times New Roman', Times, serif;
            /* 修改文字大小 */
            font-size: 50px;
            /* 字体粗细 */
            /* font-weight: bold; */
            /* 400等于normal，700等于bold */
            font-weight: 700;
            /* 文字样式  斜体*/
            font-style: italic;
            /* 文字不倾斜 */
            font-style: normal;
        }
        /* 组合属性 大小和字体必须有，顺序不能乱 */
        
        div {
            font: italic 700 20px "microsoft yahei";
        }
    </style>
</head>

<body>
    <p>阿斯顿斯蒂芬</p>
    <div>阿斯顿发生发大水</div>
</body>

css 文本属性

<style>
        h1 {
            /* 水平居中 */
            text-align: center;
            /* 装饰文本 */
            text-decoration: underline;
        }
        
        h2 {
            /* 下划线 */
            text-decoration: line-through;
        }
        
        a {
            /* 取消超链接下划线 */
            text-decoration: none;
            color: #333;
        }
        
        p {
            /* 文本缩进，em就是当前文字大小 */
            text-indent: 2em;
            /* 行高 */
            line-height: normal;
        }
    </style>

css引入方式

内部样式表就是样式写在head里
行内样式表就是样式写在html里
外部样式表就是分开写两个文件，一个只写样式一个只写结构

 <!-- 引用外部样式表 -->
    <link rel="stylesheet" href="引入方式.css">

emmet语法

快速生成html结构语法

输入div,然后tab，生成<div></div>
div3生成三个div
ul>li生成父子标签
dib+p生成一个div一个p标签
带有类名或者id名字的输入.demo和#two，tab键
生成有顺序的div用自增符号 $,div$ 5
div内部带有文字，div{有蚊子}

快速生成css样式语法

w200生成weidth：200px；
lh20生成line-height：20px；

后代选择器

<style>
        /* 父元素空格子元素：属性，修改后代属性 */
        
        ol li {
            color: blue;
        }
        
        ol li a {
            color: brown;
        }
    </style>
</head>

<body>
    <ol>
        <li>我是ol的小李</li>
        <li>我是ol的小李</li>
        <li>我是ol的小李</li>
        <li><a href="#">谁是ol的小李</a></li>
    </ol>

子选择器

只能选某元素最近一级子元素

 <style>
        /* 子选择器，只选择亲儿子 */
        
        div>a {
            color: red;
        }
    </style>
</head>

<body>
    <div>
        <a href="#">我是儿子</a>
        <a href="#">我是二儿子</a>
        <p>
            <a href="#">我是孙子</a>
        </p>
    </div>
</body>

并集选择器

 <style>
        div,
        p,
        .pigs li {
            color: red;
            /* 逗号隔开，换行可以一下设置几个不用的标签 */
        }
    </style>
</head>

<body>
    <div>熊大</div>
    <p>熊二</p>
    <span>光头强</span>
    <ul class="pigs">
        <li>佩奇</li>
        <li>乔治</li>
        <li>猪妈妈</li>
        <li>猪爸爸</li>
    </ul>

</body>

伪类选择器

<style>
        a:link {
            /* 未访问的链接是红色 */
            color: brown;
        }
        
        a:visited {
            /* 访问过的链接是黄色 */
            color: burlywood;
        }
        
        a:hover {
            /* 鼠标经过的链接是绿色 */
            color: chartreuse;
        }
        
        a:active {
            /* 鼠标按下还没有弹起的链接 */
            color: cornflowerblue;
        }
    </style>
</head>

<body>
    <a href="#">我是中国人</a>

</body>

focus伪类选择器

<style>
        /* 针对表单元素，选中发生什么变化 */
        input:focus {
            background-color: cyan;
        }
    </style>
</head>

<body>
    <input type="text">
    <input type="text">
    <input type="text">
</body>

css元素显示模式

块元素h,p,div,ul,ol,li.
独占一行
可以调节宽和高
默认100%
可以嵌套其他块元素
文字元素里面不能放其他元素

行内元素a,strong.b.em.i,del,s,ins,u,span,
一行可以显示多个
宽和高设置无效
默认宽度是内容的宽度
只能容纳文本和其他行内元素

css背景颜色

 div {
            width: 500px;
            height: 500px;
            /* 背景颜色 */
            background-color: rgb(175, 69, 69);
            /* 背景图片 */
            background-image: url(https://p0.ssl.qhimgs1.com/sdr/400__/t013ff0809aec190204.jpg);
            /* 平铺 */
            background-repeat: no-repeat;
            /* background-repeat: repeat-x; */
            /* background-repeat: repeat-y; */
            /* 背景方位 */
            background-position: center top;
            /* background-position: center right; */
            /* 精确位置 */
            background-position: 20px 50px;
            /* 背景固定还是滚动 */
            background-attachment: fixed;
            /* 复合写法 */
            background: transparent url() repeat-x fixed;
            /* 背景透明度 */
            background: rgba(0, 0, 0, 0.2);
        }

css特性

层叠性
继承性
优先级
选择器权重

<style>
        div {
            color: rgb(231, 41, 41);
        }
        
        p {
            color: rgb(207, 226, 30);
        }
        
        .quan {
            color: rgb(22, 195, 115);
        }
        
        #zhong {
            color: rgb(15, 119, 238) !important;
        }
    </style>
</head>

<body>
    <div>
        <p class="quan" id="zhong" style="color: coral;">
            选择器权重
        </p>
    </div>

</body>

盒子边框属性

div {
            width: 300px;
            height: 200px;
            border-width: 5px;
            /* 虚线边框 */
            border-style: dashed;
            /* 实现边框 */
            border-style: solid;
            /* 点线边框 */
            border-style: dotted;
            /* 边框颜色 */
            border-color: aqua;
            /* 复合写法 */
            border: 5px solid aqua;
            /* 边框可以分开写 */
            border-top: aqua;
            border-right: bisque;
            border-left: #000;
            border-bottom: chartreuse;
            /* 相邻表格边框合并 */
            border-collapse: collapse;
            /* 内边距 padding后面写一个值5，上下左右都是5
            后面写5 10，上下是5，左右是10
            后面写5 10 15，上是5，左右是10，下是15
            后面写5 10 15 20，上右下左*/
            padding-top: 10px;
            padding-left: 12px;
        }

 /* 清除内外边距 */
            * {
                padding: 0;
                margin: 0;
            }
行内元素尽量只设置左右内外边距

圆角矩形

<style>
        .yuanxing {
            height: 200px;
            width: 200px;
            background-color: rgb(44, 224, 215);
            /* 这样就是圆形，半径或者百分比 */
            /* border-radius: 100px; */
            border-radius: 50%;
        }
        
        .yuanjiaojuxing {
            height: 100px;
            width: 300px;
            background-color: rgb(14, 206, 56);
            /* 圆角矩形 */
            border-radius: 50px;
        }
        
        .qita {
            width: 200px;
            height: 200px;
            background-color: rgb(21, 214, 198);
            /* 可以分别设置四个角 */
            border-radius: 10px 20px 30px 40px;
        }
    </style>

盒子影子

<style>
        div {
            width: 200px;
            height: 200px;
            background-color: rgb(24, 175, 24);
            margin: 200px auto;
        }
        /* 鼠标经过添加阴影 */
        
        div:hover {
            /* 水平，垂直，模糊距离，阴影尺寸，阴影颜色， */
            box-shadow: 10px 10px 10px 10px rgba(0, 0, 0, .3);
        }
    </style>

文字阴影

<style>
        div {
            font-size: 1000px;
            color: rgb(56, 197, 51);
            /* 水平阴影，垂直，模糊距离，颜色 */
            text-shadow: 10px 20px 10px rgb(230, 190, 12);
        }
    </style>

浮动

网页布局准则

多个块级元素纵向排列找标准流
多个块级元素横向排列找浮动

浮动特性

浮动元素会脱离标准流
浮动元素会一行内显示并且元素顶部对齐
浮动的元素会具有行内块元素的特性

注意点

先用标准流的父元素排列上下位置，内部子元素浮动排列左右位置
浮动的盒子只会影响后面的标准流，不会影响前面的标准流
不给父盒子高度，用子盒子去撑开高度比较合适

清除浮动
给父元素添加属性：
over-flow:hidden
auto,scroll

.box:after {

}

<style>
        .clearfix:after {
            content: "";
            display: block;
            height: 0;
            clear: both;
            visibility: hidden;
        }
        .clearfix {
            /* ie67 */
            *zoom: 1;
        }
    </style>

 .clearfix:before,
        .clearfix:after {
            content: "";
            display: table;
        }
        
        .clearfix:after {
            clear: both;
        }
        
        .clearfix {
            *zoom: 1;
        }

产品类图片用jpg，小动画用gif，透明背景图用png

PS切图

快速导出为png
合并图层，导出
切片工具划出区域，文件菜单，导出，web设备格式，选格式，存储
cutterman插件

定位

static静态定位，不脱标，不用边偏移
relative相对定位，跟自己原来位置来移动，位置保留，
absolute绝对定位，移动位置相对于祖先元素，没有父元素或者父元素没有定位，则以浏览器为准
不占原来位置
sticky粘性定位，不脱标，浏览器可视区

子绝父相

固定定位fixed，以浏览器窗口为参照移动，跟父元素没关系，不随滚动条移动，脱离标准流
固定在版心右侧的做法，left50%，margin-left版心宽度一般
绝对定位的盒子居中不能用margin0auto，可以用left50%，magin-left-100px，左移盒子一半。
定位叠放次序，.box {z-index：1；}整数，数值越大越靠上，相同按书写顺序，有定位的盒子能用
行内元素添加固定定位，绝对定位后可以设置宽度和高度
块级元素添加固定定位绝对定位后不给宽度高度的话默认就是内容大小
浮动会压住标准流的盒子，但不会压住文字
定位会完全压住下面的内容

CSS学习资源
基础篇 CSS 最核心的几个概念 CSS 简写指南 CSS样式基础 CSS样式设置 CSS布局模型 CSS文字排版...
【2016年特别福利】史上最全CSS学习资料大全
基础篇 CSS 最核心的几个概念 CSS 简写指南 CSS样式基础 CSS样式设置 CSS布局模型 CSS文字排版...
react学习路线图
基础 HTML学习 HTML 基础学习 HTML 基础CSS学习 CSS 基础在上一步练习的基础上为页面添加样式使...
CSS初识
CSS基础
css大纲
css 基础 CSS 简介在 html 中使用 css link 和 @import CSS 选择器 CSS 优...
CSS第一小节第一天
CSS基础入门什么是CSS？ CSS 指层叠样式表 (Cascading Style Sheets) CSS通常...
CSS第一天
CSS 什么是CSS 为什么要学习CSS CSS基础语法 CSS使用方法 CSS选择器 CSS继承和层叠 CSS优...
史上最全的HTML、CSS知识点总结，浅显易懂。适合入门新手，需
一，html+css基础 1-1 Html和CSS的关系学习web前端开发基础技术需要掌握：HTML、CSS、J...
史上最全的HTML、CSS知识点总结，浅显易懂。
一，html+css基础 1-1 Html和CSS的关系学习web前端开发基础技术需要掌握：HTML、CSS、J...
前端入门系列
前端HTML & CSS 基础入门（1）初识前端HTML & CSS 基础入门（2）段落及文本前端HTML &...