css入门

最新推荐文章于 2024-05-18 06:08:21 发布

ZwjAS

最新推荐文章于 2024-05-18 06:08:21 发布

阅读量789

点赞数 23

文章标签： css 前端 html5

本文链接：https://blog.csdn.net/ZWJAS/article/details/135394668

版权

总结

html

标题标签：模块的标题

<h1>标题1</h1><!--字体最大-->
<h2>标题2</h2>
<h3>标题3</h3>
<h4>标题4</h4>
<h5>标题5</h5>
<h6>标题6</h6>

布局标签:容器标签

<div>
</div>

特殊的div

<header></header><!--布局中作为头部-->
<nav></nav><!--布局中作为导航-->
<article></article>
<aside></aside>
<footer></footer><!--布局中作为底部-->

列表标签:做导航或者菜单

有序列表

 <ol>
        <!-- <li>苹果</li> -->
        <li>香蕉</li>
        <li>荔枝</li>
        <li>
            <ol>
                <li>aaa</li>
                <li>bbb</li>
                <li>ccc</li>
            </ol>
        </li>
        <li>桃子</li>
</ol>

无序列表

<ul>
        <li>猴子</li>
        <li>豹子</li>
        <li>狗子</li>
        <li>鸟子</li>
        <li>鸽子</li>
</ul>

定义列表

    <dl>
        <dt>中</dt>
        <dd>zhong</dd>
        <dt>国</dt>
        <dd>guo</dd>
        <dt>梦</dt>
        <dd>meng</dd>
    </dl>

跑马灯标签

<body>
    <!-- 跑马灯标签 -->
    <!-- <marquee direction="滚动的方向：left right up down" 
    behavior="滚动的方式：scroll：连续滚动，slide：滑动、alternate：来回弹动"
    scrollamount="每秒滚动单位：默认6px"
    scrolldelay="滚动的间隔时间：以毫秒为单位，默认85毫秒"
    loop="滚动的次数"
    onmouseover="this.stop() 鼠标进入停止滚动"
    onmouseout="this.start() 鼠标离开继续滚动">
        hello,marquee
    </marquee> -->

    <marquee direction="right" scrollamount="20px" behavior="alternate" onmouseover="this.stop()"
    onmouseout="this.start()">
        fdgfdgfdgdf
    </marquee>
</body>

css:层叠样式表

样式表：对标签显示样子设置，美化标签

使用样式:

内联：在标签上直接使用

<p style="color: lime;">你好，我是翠绿色</p>

内部引用，在head标签里面书写style标签，把样式写到style标签里面

<head>
    <style type="text/css">
        span{
            color: green;
        }
        p{
            color:red;
        }
    </style>
    
</head>
<body>
    <!-- 在html怎样使用样式：2、内部引用，在head标签里面书写style标签，把样式写到style标签里面  -->
    <p>shdfhdsfklh<span>sak</span>fdhsa</p>
</body>

注意：内部使用的优缺点：优点：书写方便，缺点：这个样式只能当前页面使用，其他页面不能用

外部引用，将样式放在一个样式文件里面

<head>
    <link rel="stylesheet" href="./cssDemo1.css" />
</head>
<body>
    <!-- 使用外部样式表需要使用link标签来引入 -->
    <h3>这么强，可怕!!!!!</h3>
</body>

 <!-- cssDemo1.css -->
h3{
    color:yellowgreen;
}
p{
    color: aqua;
}

选择器：找到标签的方式，要设置标签的样式，首先找到标签

标签名选择器，通过标签名找到

<head>
	<style>
        p {
            color:aquamarine;
        }
	</style>
</head>
<body>
	<p>红烧肉</p>
	<p>凉拌鸡</p>
	<p>炖蹄花</p>
</body>

类选择器:通过标签的class属性名字找到标签，使用时需要在名前加.(class的名字可以重复)

<head>
	<style>
     .c1 {
                color: red;
            }
     .c2 {
                color: lime;
            }
	</style>
</head>
<body>
    <p><span class="c1">第三</span>个梵蒂冈<span class="c2">规		范环境</span></p>
    <h1 class="c1">第三个梵蒂冈浮点</h1>
</body>

id选择器：同标签的id属性值来找到标签，使用时需要在名字前加#(在同一个网页中id的名字不能重复)

<head>
	<style>
		 #p1 {
            color:blueviolet;
        	}
        /*  option[value]:option标签里面有value属性的，任意属性都			可以 */
        /* option[value="o1"]:option标签中有value属性，并且值等		 于o1的标签 */
        option[value="o1"] {
            color:rgb(244, 4, 4);
        }
        li[class="li1"] {
            color: lime;
        }
	</style>
</head>
<body>
    <p id="p1">32454365476547</p>
    <hr /><!--分割线标签-->
    <!-- 4、属性选择器 -->
    <select name="s1">
        <option value="o1">a</option>
        <option>a</option>
        <option value="o3">a</option>
        <option>a</option>
        <option value="o5">a</option>
    </select>
    <hr />
    <ol>
        <li class="li1">aaaa</li>
        <li>aaaa</li>
        <li class="li1">aaaa</li>
        <li>aaaa</li>
        <li class="li2">aaaa</li>
        <li>aaaa</li>
    </ol>
    <hr />
</body>

组合选择器:多个选择器公用同一个样式，每个选择器用，分隔

<head>
 		/* 组合选择器：input有name属性的和class为p2 */
        input[name],.p2 {
            background-color: lime;
        }
	</style>
</head>
<body>
	<form action="#" method="post">
       用户名:<input type="text" name="username" 					placeholder="请输入用户名" /><br />
       用户名:<input type="text" name="username" 					placeholder="请输入用户名" /><br />
       用户名:<input type="text" name="username" 					placeholder="请输入用户名" /><br />
       用户名:<input type="text" name="username" 					placeholder="请输入用户名" /><br />
    </form>
    <p class="p2">hello</p>
    <hr />
</body>

层次选择器：

空格：后代选择器，选择被div标签包裹的所有span标签

<head>
	<style>
        /* 层次选择器：p 里面所有span标签 */
        p span {
            color:blue;
        }
	</style>
</head>
<body>
    <p>123<span>abc</span>efg<span>456</span><label><span>地		方</span></label></p>
    <p>hfdhfgdhgfhgfjfsaa</p>
</body>

‘>’：子代选择器，选择被div标签直接包裹的儿子，不会影响p标签中的span标签

<head>
	<style>
        /* 层次选择器：p 里面所有span标签 */
        p > span {
            color:blue;
        }
	</style>
</head>
<body>
    <p>123<span>abc</span>efg<span>456</span><label><span>地		方</span></label></p>
    <p>hfdhfgdhgfhgfjfsaa</p>
</body>

‘+’：兄弟选择器，选择div标签后面紧挨着的span标签，不会影响后续的兄弟标签，此标签只能影响后面的兄弟

<head>
	<style>
        /*  table+p：table标签后面第一个兄弟标签*/
        .tr1 + tr {
            background-color: lime;
        }
	</style>
</head>
<body>
    <table border="1">
        <tr class="tr1">
            <td>1</td>
            <td>1</td>
            <td>1</td>
        </tr>
        <tr>
            <td>1</td>
            <td>1</td>
            <td>1</td>
        </tr>
        <tr>
            <td><p>hello</p></td>
            <td>1</td>
            <td>1</td>
        </tr>
    </table>
    <p>hello</p>
    <p>hello</p>
    <p>hello</p>
</body>

伪类选择器

伪类是一种状态，给标签的一种状态设置样式就叫伪类选择器

:hover：设置元素在其鼠标悬停时的样式
:enable 选择每个已启动的元素
:disabled 选择每个已禁止的元素
:read-only 选择有"readonly"的表单元素，注意只读包含禁用，所以也会影响具有"disabled"的表单元素
:read-write 选择没有"readonly"的表单元素，设置了disabled的元素也认为设置了readonly
:first-child 选择满足是其父元素的第一个子元素的元素
:last-child 选择满足是其父元素的最后一个子元素的元素
:focus 选择拥有键盘输入焦点的元素 - 一般用于输入框中
:checked+要改变的元素 选择每个被选中的元素
:not(selector) 选择不满足selector的元素
E:nth-child(n) { css样式 } - n可以是数子，2n，2n-1，even奇数，odd偶数，具体请看稳定
	会选择父元素的第n个子元素E，如果第n个子元素不是E，则是无效选择符，但n会递增

综合例子

<h3 id="d1">搞笑段子</h3>
<div>做人就是累，不然怎么能叫人类</div>
<div class="c1">去拿快递，快递员一直找不到，于是转身问我：你是不是小件货</div>
<div>如果你月薪一万想在北京买房子，不妨先定个小目标，比如，先活他个500年</div>
<div class="c1">说好一起到白头，你却偷偷<span>焗了油</span></div>
<div>我才二十来岁，爱情可以晚点到，但是快递和外卖，晚一点点都不行</div>
<div class="c2">你要记住，<p><span>无论到最后</span></p> <span>我们疏远</span>成什么样子，一个红包就能回到当初</div>
<span>待得来年九月八，我花开后百花杀</span>
<span>轻舟已过万重山</span>
<hr/>

<ol>
    <li>霸王别姬</li>
    <li>大话西游</li>
    <li>功夫</li>
</ol>
<ul>
    <li>西游记</li>
    <li>红楼梦</li>
    <li>水浒传</li>
    <li>三国演义</li>
</ul>
<hr/>

用户：<input value="tom" readonly/><br><br>
密码：<input type="password" disabled/><br><br>
地址：<input class="c2" type="text"/>
性别：
<input type="radio" name="sex" id="i1" checked/><label for="i1">男</label>
<input type="radio" name="sex" id="i2"/><label for="i2">女</label>

部分CSS样式：

input:enabled{
    background-color: brown;
}
input:disabled{
    background-color: aquamarine;
}
input:read-only{
    background-color: rgb(163, 158, 167);
}
input:read-write{
    background-color: greenyellow;
}
ol li:first-child{
    font-size: 30px;
}
ol li:last-child{
    font-size: 30px;
}
input:focus{
    background-color: deeppink;
}
input:checked+label{
    color: rgb(216, 148, 21);
}
ul li:not(ul li:last-child){
    background-color: violet;
}
ul li:nth-child(2){
    font-size: 30px;
}

伪元素选择器

::first-letter 选择指定元素的第一个单词
::first-line 选择指定元素的第一行
::after 在指定元素的内容前面插入内容
::before 在指定元素的内容后面插入内容

综合例子

     <div>
        <p>大师傅但是dafdsgfdh</p>
        <p>sdafdsgfdh</p>
        <p>sdafdsgfdh</p>
        <p>sdafdsgfdh</p>
     </div>

部分CSS样式：

        /*  p::first-letter:将p的第一个字符选中 */
        p::first-letter {
            color: red;
        }
        /* div::first-line：将div里面第一行选中 */
        div::first-line {
            background-color: lime;
        }
        /*  p:nth-child(1):选中第一个p标签，::before：在p标签的开始插入内容 */
        p:nth-child(1)::before {
            content: "哈哈";
            /* content: url("https://t7.baidu.com/it/u=760837404,2640971403&fm=193&f=GIF"); */
        }

        p:nth-child(even)::after {
            content: "哈哈哈";
        }

文本样式

样式属性	意义	示例
font-family	设置字体	`font-family: Arial, sans-serif;` - 电脑中的字体
font-size	设置字体大小	`font-size: 16px;`
font-weight	设置字体加粗	`font-weight: bold;`
font-style	设置字体样式	`font-style: italic;`
color	设置文本颜色	`color: red;`
line-height	设置行高	`line-height: 1.5;`
text-align	设置文本对齐方式	`text-align: center;`
text-decoration	设置文本装饰	`text-decoration: underline;`
text-transform	设置文本大小写转换	`text-transform: uppercase;`
text-shadow	设置文本阴影	`text-shadow: 1px 1px 2px #000000;`

例子：

<style>
    p{
        font-family: Arial; /* 字体类型：Arial */
        font-size: 40px; /* 字体大小：40个像素点 */
        color: orangered; /* 字体颜色：橙红色 */
        font-weight: bolder; /* 文本重量：文本加粗 */
        font-style: italic; /* 字体样式：斜体 */
        text-align: center; /* 文本水平位置：居中 */
        text-decoration: underline; /* 文本修饰：下划线 */
        text-transform: uppercase; /* 文本转换：转大写 */
        line-height: 1; /* 行高 - 可以用来调整上下高度 */
        text-shadow: 15px 15px 2px #000000; /* 文本阴影：x轴 y轴 模糊度 颜色 */
    }
</style>
<p>itsource-源码时代</p>

颜色单位

颜色可以是十六进制的颜色编码或者颜色名，也可以设置为表示红、绿、蓝的值或者百分比。具体如下：

1. 颜色名称：red、 yellow、green、blue、pink、gray、black、white、orange【常用】
2. 十六进制数：#ff0000 - #000000到#ffffff【常用】
3. RGB值：rgb(255,0,0)，CSS中的rgb值是一种表示颜色的方式，它是由红、绿、蓝三种颜色的值组成，它的组成方式像这样rgb(红色值, 绿色值, 蓝色值)，这三个参数的取值范围是0～255之间，可以用十进制或十六进制表示
4. RGB百分比值：rgb(100%,0%,0%)

长度单位

在CSS中可以三种方式来度量长度：绝对单位、相对单位和百分比

绝对单位有：

pt：1点，也称为 1 磅，1 pt 等于 1/72 英寸 
pc：1 pc 等于 12 pt
in：英寸 
cm：厘米 
mm：毫米

相对单位有：

px：像素，计算机屏幕上的一个点 【常用】
em：em单位相对于参考元素的字体尺寸，1em等于当前的字体尺寸。2em等于当前字体尺寸的两倍

**百分比：**相对于父元素的长度设置为该值的百分之多少

50%：占比父元素的一半【常用】

常用：px像素点和百分比，px像素点用得比较多。height 属性和width 属性通常就用px像素点设置

背景样式

CSS中的background属性用于设置元素的背景样式，包括背景颜色、图片、定位等属性。常用样式如下：

样式属性	意义	示例
background-color	设置元素的背景颜色	`background-color: #f2f2f2;`
background-image	设置元素的背景图片	`background-image: url('image.jpg');`
background-repeat	设置元素的背景图片是否平铺	`background-repeat: no-repeat;`
background-position	设置元素的背景图片的位置	`background-position: center;`
background-size	设置元素的背景图片的尺寸	`background-size: cover;`
background-attachment	设置元素的背景图片不随滚动条滚动	`background-attachment: fixed;`

下面是一个案例展示，假设有以下HTML代码：

<div class="box"></div>
<div class="box"></div>

我们可以通过CSS设置.box元素的background属性来设置其背景样式：

<style>
    .box{
        width: 700px; /* 宽度：700个像素 */
        height: 500px; /* 高度：500个像素 */
        border: 1px solid gold; /* 边框：1个像素宽度 边框样式实线 边框颜色金色  */
        background-color: aqua; /* 背景颜色：aqua */ 
        /* background-color: rgba(255,255,125,0.5); *//* 还可以指定透明度 */
        margin: 0 auto; /* 外边距：上下0 左右自动*/
    }
    body{
        /*background-image: url("images/zbc.webp");*/ /* 背景图片：url地址 */
        /*background-repeat: no-repeat;*/ /* 背景重复：不重复 */
        /*background-position: top right;*/ /* 背景定位：顶部 右边 */
        /*background-attachment: fixed;*/ /* 背景附属：固定 - 不随滚动条移动 */
        /*还有一种简洁方法，将背景统一设置，加上背景颜色称之为背景五合一*/
        /* 背景复合属性：位置可以换，也可以省略，因为样式值是唯一的不会冲突。一般建议背景颜色放在最前面 */
        background:pink url("images/01.jpg") no-repeat top right fixed;
    }
</style>