css

首页 > 代码库 > css

2024-11-15 00:09:39 203人阅读

什么是css
4种常用的css选择器
css的引入方式

1.什么是css？

我们学过了html之后，接下来要接触的就是web标准中另一个重要的东西，就是css。Web标准不是某一个标准，而是很多标准的集合。网页主要是由3部分构成：结构（html）；表现（css）；行为（javascript）。这些标准大部分是由w3c制定的。

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>
    <body>
    </body>
</html>

　　.1Html <!doctype>声明标签： 1.1定义和用法： * <!DOCTYPE> 声明必须是 HTML 文档的第一行，位于 <html> 标签之前。 * <!DOCTYPE> 声明不是 HTML 标签；它是指示 web 浏览器关于页面使用哪个 HTML 版本进行编写的指令。

　　.2.各版本的声明 * HTML5：<!DOCTYPE html> <meta charset="utf-8">

2.4种常用的css选择器

-1.HTML标记定义 <p>...</p> p { 属性:属性值；属性1:属性值1 } p可以叫做选择器，定义那个标记中的内容执行其中的样式一个选择器可以控制若干个样式属性，他们之间需要用英语的“;”隔开，最后一个可以不应加“;”

-2.Class定义 <p class="p">...</p> class定义是以“.”开始 .p { 属性:属性值；属性1:属性值1 }

-3. ID定义 <p id="p">...</p> ID定义是“#”开始的 #p { 属性:属性值；属性1:属性值1 }

-----优先级问题 1.ID>Class>HTML 2.同级时选择离元素最近的一个的 #p { color: red } #p { color: #f60 } 执行颜色为#f60的

-4.组合选择器（同时控制多个元素） h1,h2,h3 { font-size: 14px; color: red; } 选择器组合可以使用“,”隔开 6.伪元素选择器 1.a:link : 正常连接的样式 2.a:hover : 鼠标放上去的样式 3.a:active : 选择链接时的样式 4.a:visited : 已经访问过的链接的样式

3.css的引入方式

-1.内链样式表 <body style="background-color:green; margin:0; padding:0;"></body>

-2.嵌入式样式表 <style type="text/css"></style> 需要将样式放在<head></head>中

-3.引入式样式表 <link rel="StyleSheet" type="text/css" href="http://www.mamicode.com/style.css">

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <!--嵌入式样式表  ：只应用于某个html文档
        <style type="text/css">
            /*img {
                width:300px;
            }*/
        </style>-->
        <!--引入式样式表：应用于全局（整站）样式，
            设置某个页面的css样式：css样式文件要跟html文件路径名相同
        <link rel="stylesheet" type="text/css" href="http://www.mamicode.com/css/cssTest.css"/>-->
    </head>
    <body>
        <!--<img src="http://www.mamicode.com/img/t01.png">
        <img src="http://www.mamicode.com/img/t01.png">
        <img src="http://www.mamicode.com/img/t01.png">-->
        <p>hello css</p>
        <p>java03 css</p>
        <!--内链样式表： 使用css代码来设置某一个标签的样式
        <p style="background: red; color: black;">hahha</p>-->
        
        
    </body>
</html>

css引入方式

4.常见属性

-1. 颜色属性 color属性定义文本的颜色 color：green color：#ff6600 color：#f60 简写式 color：rgb（255,255,255）红(R)、绿(G)、蓝(B) 每个的取值范围0~255 color：rgba（255,255,255,1） RGBA是代表Red（红色） Green（绿色） Blue（蓝色）和 Alpha的(色彩空间)透明度

-2. 字体属性 1.font-size 字体大小 font-size:14px 2.font-family 定义字体 font-family：微软雅黑，serif；可以使用“，”隔开，以确保当字体不存在的时候直接使用下一个 3.font-weight 字体加粗 normal(默认值)、bold(粗)、bolder(更粗)、lighter(更细) 100、200、300~900 400 = normal，而 700 = bold

-3.背景属性

　　 1.背景颜色 background-color

　　2.背景图片 background-image

　　　　 background-image:url(图片路径)；　　background-image:none

　　3.背景重复 background-repeat

　　　　 repeat ：重复平铺满　　repeat-x ：向X轴重复　　 repeat-y ：向Y轴重复　　 no-repeat ：不重复

　　4.背景位置 background-position

　　　　横向（left,center,right）　　纵向（top,center,bottom）

　　1-4简写方式：—background:背景颜色 url(图像) 重复位置 —background:#f60 url(images/bg,jpg) no-repeat top center

　　5.background-size: 值：

　　　　-length:设置背景图像的高度和宽度。第一个值设置高度，第二个值设置宽度。如果只设置一个值，则第二个值会被设置为auto。

　　　　 -percentage:以父元素的百分比来设置背景图像的高度和宽度。第一个值为宽度，第二个值为高度。如果只设置一个值，则另一个值为auto。

　　　　-cover:把背景图片扩展至足够大，以使背景图像完全覆盖背景区域。背景图像的某些部分也许无法显示在背景定位区域中。

　　　　 -contain:把图像扩展至最大尺寸，以使其宽度和高度完全适应内容区域。

-4. 文本属性

　　1.text-align 横向排列 left，center，right

　　2.line-height 文本行高：　　1.%基于字体大小的百分比行高　　2.数值来设置固定值

　　3.text-indent 首行缩进

　　 4.letter-spacing 字符间距 :1.normal 默认　　2. length设置具体的数值（可以设置负值）　　 3. inherit 继承

-5.边框属性：

　　1.边框风格： border-style

　　　　统一风格（简写风格）border-style ：

　　　　单独定义某一方向的边框样式：

　　　　　　 border-bottom-style 下边边框样式　　　　　border-top-style 上边边框样式　　 border-left-style 左边边框样式　　border-right-style 右边边框样式

　　　　边框风格样式的属性值：　　 1、none 无边框　　 2、solid 直线边框　　3、dashed 虚线边框　　 4、dotted 点状边框　　5、double 双线边框　　6、groove 凸槽边框　　 7、ridge 垄状边框　　 8、inset inset边框　　9、outset outset边框　　10、inherit继承依托border-color的属性值

　　2.边框宽度 border-width

　　　　统一风格： border-width：

　　　　单独风格： border-top-width 上边边框宽度　　 border-bottom-width 下边边框宽度　　 border-left-width 左边边框宽度　　 border-right-width 右边边框宽度

　　　　边框宽度的属性值： 1、thin 细边框 2、medium 中等边框 3、thick 粗边框 4、px 固定值的边框 5、inherit继承

　　3.边框颜色

　　　　border-color 统一风格：　　

　　　　border-color 单独风格： border-top-color 上边边框颜色　　border-bottom-color 下边边框颜色　　 border-left-color 左边边框颜色　　 border-right-color 右边边框颜色

　　　　属性值：颜色值的名称： red、green RGB： rgb(255,255,0) RGBA：rgba(255,255,0,0.1) 十六位进制：#ff0、#ff0000 继承inherit

　　　　属性值的四种情况：　　一个值：border-color：（上、下、左、右）；　　两个值：border-color：（上下）（左右）；　　三个值：border-color:（上）（左、右）（下）; 　　四个值：border-color：（上）（右）（下）（左）;

-6.列表属性：

　　 1.标记的类型 list-style-type

　　　　none 无标记　　Disc 默认。标记是实心圆　　circle 标记是空心圆。

　　　　 Square 标记是实心方块　　decimal 标记是数字。

　　　　 decimal-leading-zero 0开头的数字标记。(01, 02, 03, 等。) lower-roman 小写罗马数字(i, ii, iii, iv, v, 等。)

　　　　 upper-roman 大写罗马数字(I, II, III, IV, V, 等。) lower-alpha 小写英文字母The marker is lower-alpha (a, b, c, d, e, 等。)

　　　　upper-alpha 大写英文字母The marker is upper-alpha (A, B, C, D, E, 等。) lower-greek 小写希腊字母(alpha, beta, gamma, 等。)

　　　　 lower-latin 小写拉丁字母(a, b, c, d, e, 等。) upper-latin 大写拉丁字母(A, B, C, D, E, 等。)

　　　　Hebrew 传统的希伯来编号方式 Armenian 传统的亚美尼亚编号方式　georgian 传统的乔治亚编号方式(an, ban, gan, 等。)

　　　　cjk-ideographic 简单的表意数字 hiragana 标记是：a, i, u, e, o, ka, ki, 等。（日文片假名） katakana 标记是：A, I, U, E, O, KA, KI, 等。（日文片假名） hiragana-iroha 标记是：i, ro, ha, ni, ho, he, to, 等。（日文片假名） katakana-iroha 标记是：I, RO, HA, NI, HO, HE, TO, 等。（日文片假名）

　　2.标记的位置 list-style-position inside 列表项目标记放置在文本以内，且环绕文本根据标记对齐。 outside 默认值。保持标记位于文本的左侧。列表项目标记放置在文本以外，且环绕文本不根据标记对齐。 inherit 规定应该从父元素继承 list-style-position 属性的值。

　　3.设置图像列表标记 list-style-image URL 图像的路径。 none 默认。无图形被显示。 inherit 规定应该从父元素继承 list-style-image 属性的值。

　　 4.简写方式

　　　　list-style

　　　　list-style:square inside url(‘/i/arrow.jpg‘);

5.div+css布局

1. div和span

　　DIV和SPAN在整个HTML标记中，没有任何意义，他们的存在就是为了应用CSS样式

　　DIV和span的区别在与，span是内联元素，div是块级元素

2.盒模型

margin ：盒子外边距

padding ：盒子内边距

border ：盒子边框宽度

width ：盒子宽度

height ：盒子高度

3.布局相关的属性

-1.position 定位方式

　　1.相对定位：relative

　　2.绝对定位：absolute

　　3.根据浏览器窗口进行定位：fixed

　　4.没有定位：static

　　5.继承：inherit

-2.定位

　　left（左），right（右），top（上），bottom（下）离页面顶点的距离

-3.z-index 层覆盖先后顺序（优先级）

---------------------------------------------------------------------------------------------------------------------------------------------------------------

3注：css定位

top bottom left right

相对定位：position：relative　--->　相对于该元素本身的位置进行的位移

绝对定位：position：absolute--->根据某元素的父级元素进行位移。如果没有父级窗体，就会根据body进行位移

锁定：fixed　----->　根据body锁定某元素到某个位置

相对定位绝对定位区别：

　　相对定位的元素在位移时不会失去原有的位置（不会被覆盖掉）

　　绝对定位的元素在位移时会失去原有位置（会被覆盖掉）

--------------------------------------------------------------------------------------------------------------------------------------------------------------------

-4.display 显示属性

　　 display：none 层不显示

　　 display：block 块状显示，在元素后面换行，显示下一个块元素

　　display：inline 内联显示，多个块可以显示在一行内

-5.float 浮动属性

　　 left 左浮动　　right 右浮动

-6.clear 清除浮动 clear：both

-7.overflow 溢出处理

　　 hidden 隐藏超出层大小的内容

　　scroll无论内容是否超出层大小都添加滚动条

　　auto 超出时自动添加滚动条

css

声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉：投诉/举报工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。

联系
我们

首页 > 代码库 > css

css

看完仍有疑问？有类似问题直接问程序猿