CSS-基本语法/引用/文本设置

css基本语法及页面引用

css基本语法

css的定义方法是:

选择器 { 属性:值; 属性:值; 属性:值;}

选择器是将样式和页面元素关联起来的名称,属性是希望设置的样式属性每个属性有一个或多个值。代码示例:

div{ width:100px; height:100px; color:red }

css页面引入方法:

1、外联式:通过link标签,链接到外部样式表到页面中。

<link rel="stylesheet" type="text/css" href="css/main.css">

2、嵌入式:通过style标签,在网页上创建嵌入的样式表。

<style type="text/css">
div{ width:100px; height:100px; color:red }
......
</style>

3、内联式:通过标签的style属性,在标签上直接写样式。

<div style="width:100px; height:100px; color:red ">......</div>

4.导入式: 将一个独立的.css文件引入HTML文件中,导入式使用CSS规则引入外部CSS文件,<style>标记也是写在<head>标记中。

<style type="text/css">
@import"mystyle.css"; 此处要注意.css文件的路径
</style> 

css文本设置

常用的应用文本的css样式:

  • color 设置文字的颜色,如: color:red;

  • font-size 设置文字的大小,如:font-size:12px;

  • font-family 设置文字的字体,如:font-family:'微软雅黑';

  • font-style 设置字体是否倾斜,如:font-style:'normal'; 设置不倾斜,font-style:'italic';设置文字倾斜

  • font-weight 设置文字是否加粗,如:font-weight:bold; 设置加粗 font-weight:normal 设置不加粗

  • font 同时设置文字的几个属性,写的顺序有兼容问题,建议按照如下顺序写: font:是否加粗 字号/行高 字体;如: font:normal 12px/36px '微软雅黑';

  • line-height 设置文字的行高,如:line-height:24px;

  • text-decoration 设置文字的下划线,如:text-decoration:none; 将文字下划线去掉

  • text-indent 设置文字首行缩进,如:text-indent:24px; 设置文字首行缩进24px

  • text-align 设置文字水平对齐方式,如text-align:center 设置文字水平居中

css颜色表示法

css颜色值主要有三种表示方法:

1、颜色名表示,比如:red 红色,gold 金色

2、rgb表示,比如:rgb(255,0,0)表示红色

3、16进制数值表示,比如:#ff0000 表示红色,这种可以简写成 #f00

css选择器

常用的选择器有如下几种:

1、标签选择器

标签选择器,此种选择器影响范围大,建议尽量应用在层级选择器中。
举例:

*{margin:0;padding:0}         <!-- 应用于所有的标签 -->
div{color:red} <!-- 应用于div标签 --> <div>....</div> <!-- 这里是使用,对应以上两条样式 -->
<div class="box">....</div> <!-- 对应以上两条样式 -->

2、id选择器

通过id名来选择元素,元素的id名称不能重复,所以一个样式设置项只能对应于页面上一个元素,不能复用,id名一般给程序使用,所以不推荐使用id作为选择器。
举例:

#box{color:red} 

<div id="box">....</div>   <!-- 对应以上一条样式,其它元素不允许应用此样式 -->

3、类选择器

通过类名来选择元素,一个类可应用于多个元素,一个元素上也可以使用多个类,应用灵活,可复用,是css中应用最多的一种选择器。
举例:

.red{color:red}
.big{font-size:20px}
.mt10{margin-top:10px} <div class="red">....</div>
<h1 class="red big mt10">....</h1>
<p class="red mt10">....</p>

4、层级选择器

主要应用在选择父元素下的子元素,或者子元素下面的子元素,可与标签元素结合使用,减少命名,同时也可以通过层级,防止命名冲突。
举例:

.box span{color:red}
.box .red{color:pink}
.red{color:red} <div class="box">
<span>....</span>
<a href="#" class="red">....</a>
</div> <h3 class="red">....</h3>

5、组选择器

多个选择器,如果有同样的样式设置,可以使用组选择器。
举例:

E,F   多元素选择器,同时匹配所有E元素或F元素,E和F之间用逗号分隔      :div,p { color:#f00; }

E F   后代元素选择器,匹配所有属于E元素后代的F元素,E和F之间用空格分隔 :li a { font-weight:bold;}

E > F   子元素选择器,匹配所有E元素的子元素F            :div > p { color:#f00; }

E + F   毗邻元素选择器,匹配所有紧随E元素之后的同级元素F  :div + p { color:#f00; } 

E ~ F   普通兄弟选择器(以破折号分隔)                 :.div1 ~ p{font-size: 30px; }

.box1,.box2,.box3{width:100px;height:100px}
.box1{background:red}
.box2{background:pink}
.box2{background:gold} <div class="box1">....</div>
<div class="box2">....</div>
<div class="box3">....</div>

6、伪类及伪元素选择器:专用于控制链接的显示效果

常用的伪类选择器有hover,表示鼠标悬浮在元素上时的状态,伪元素选择器有before和after,它们可以通过样式在元素中插入内容。

        a:link(没有接触过的链接),用于定义了链接的常规状态。

        a:hover(鼠标放在链接上的状态),用于产生视觉效果。

        a:visited(访问过的链接),用于阅读文章,能清楚的判断已经访问过的链接。

        a:active(在链接上按下鼠标时的状态),用于表现鼠标按下时的链接状态。

        伪类选择器 : 伪类指的是标签的不同状态:

                   a ==> 点过状态 没有点过的状态 鼠标悬浮状态 激活状态

        a:link {color: #FF0000} /* 未访问的链接 */

        a:visited {color: #00FF00} /* 已访问的链接 */

        a:hover {color: #FF00FF} /* 鼠标移动到链接上 */

        a:active {color: #0000FF} /* 选定的链接 */ 格式: 标签:伪类名称{ css代码; }
 伪类选择器
link:
hover:
.out:hover .box1{ <!-- 悬浮out 修改 box1,被操作的标签(box
)一定是悬浮标签(out)的子元素 --> }
visited:
active: before:
after:用于 内联 标签之间增加个换行(块标签)

before after伪类

 :before    p:before       在每个<p>元素之前插入内容
:after p:after 在每个<p>元素之后插入内容 例:p:before{content:"hello";color:red;display: block;}

属性选择器

     <style>
div[egon]{ <!-- 标签是 div 属性是 egon的 -->
color:red;
} [egon]{ <!-- *属性是 egon的 -->
color:red;
} div[egon="123"]{ <!-- *精确定位 -->
color:red;
} div[egon^="123"]{ <!-- 123开头的 -->
color:red;
} div[egon$="123"]{ <!-- 123结尾的 -->
color:red;
} div[egon*="123"]{ <!-- 包含123 -->
color:red;
} div[egon~="123"]{ <!-- 多条属性的时候,选择其中一条属性 -->
color:red;
}
</style>

选择器的优先级:

     color:red!important;(最高)        内嵌:1000     id:100      class:10        element(标签):1
.c1 .c2 .c3{ <!-- 级别是30 -->}
.c1 p{ <!-- 级别是11 --> }

选择器的继承:

盒子套盒子,外面盒子的属性会被里面的盒子继承

属性:

    color;
background-color;
fount-size;
border; text-decoration:none 下划线吧。。。 字体:
color:RBGA(前三个是颜色,A是透明度)
text-align; left center right justify(两端对齐) vertical-align;baseline - top - middle - (-)10px background-color;
background-image;
background-repeat; repeat-x - repeat-y - no-repeat(填充规则)
background-position:100px 200px; 左-100, 上-200
center center
(修改图片位置)
background:url("图片地址") no-repeat center center; border:1px 线形 red;
border-style:线型
border-color:颜色
border-width:宽度 list
list-style:none(加元素) margine width;
height; border-radius:20 (圆润度)

  placeholder:text框中的默认值
  cursor:设置鼠标指针形状-例子中是用在 botton 中的
    pointer

  outline:搜索框外面的线(选中的时候才有)

  

CSS3新增选择器

1、E:nth-child(n):匹配元素类型为E且是父元素的第n个子元素

<style type="text/css">
.list div:nth-child(2){
background-color:red;
}
</style>
......
<div class="list">
<h2>1</h2>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
</div> <!-- 第2个子元素div匹配 -->

2、E:nth-last-child(n):匹配元素类型为E且是父元素的倒数第n个子元素(与上一项顺序相反)
3、E:first-child:匹配元素类型为E且是父元素的第一个子元素
4、E:last-child:匹配元素类型为E且是父元素的最后一个子元素
5、E:only-child:匹配元素类型为E且是父元素中唯一的子元素
6、E:nth-of-type(n):匹配父元素的第n个类型为E的子元素
7、E:nth-last-of-type(n):匹配父元素的倒数第n个类型为E的子元素(与上一项顺序相反)
8、E:first-of-type:匹配父元素的第一个类型为E的子元素
9、E:last-of-type:匹配父元素的最后一个类型为E的子元素
10、E:only-of-type:匹配父元素中唯一子元素是E的子元素
11、E:empty 选择一个空的元素
12、E:enabled 可用的表单控件
13、E:disabled 失效的表单控件
14、E:checked 选中的checkbox
15、E:not(s) 不包含某元素

<style type="text/css">
.list div:not(:nth-child(2)){
background-color:red;
}
</style>
......
<div class="list">
<h2>1</h2>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
</div> <!-- 第 3、4、5 子元素div匹配 -->

其他说明

li:nth-child(2){   修改第2个li
}
li:nth-child(2n){ 修改偶数
}
li:nth-child(2n+1){ 修改奇数的
} .box div:nth-child(3){ 找到第三个子元素,如果是div就运行 } .box div:nth-of-type(3){ 找到子元素中的第三个div元素
}

CSS3圆角、阴影、rgba

CSS3圆角

设置某一个角的圆角,比如设置左上角的圆角:
border-top-left-radius:30px 60px;

同时分别设置四个角: border-radius:30px 60px 120px 150px;

设置四个圆角相同:
border-radius:50%;

CSS3阴影

box-shadow:h-shadow v-shadow blur spread color inset;
分别设置阴影:水平偏移 垂直偏移 羽化大小 扩展大小 颜色 是否内阴影

<style type="text/css">
.box{
width:200px;
height:50px;
background-color:gold;
/* box-shadow:10px 10px 5px 2px pink inset; */
box-shadow:10px 10px 5px 2px pink;
}
</style>
......
<div class="box"></div> <!-- 给盒子加上了粉红色的阴影 -->

rgba(新的颜色值表示法)

1、盒子透明度表示法:opacity:0.1;filter:alpha(opacity=10)(兼容IE);
2、rgba(0,0,0,0.1) 前三个数值表示颜色,第四个数值表示颜色的透明度

CSS-基本语法/引用/文本设置/选择器/css3属性的更多相关文章

  1. CSS 颜色 字体 背景 文本 边框 列表 display属性

    1  颜色属性 <div style="color:blueviolet">ppppp</div> <div style="color:#f ...

  2. 用css实现网站切角效果 使用css3属性:渐变

     都是大量的练习,老师练习乒乓球花了大量时间,十万次一个动作的重复,高中班主任说过,世上没有天才,只是重复的次数多了,自然被认作了天才,小小班的学生之所以厉害是因为他们重复一个知识点次数多,所以没有一 ...

  3. CSS3 属性组参考资料

    CSS 属性组: 动画 背景 边框和轮廓 盒(框) 颜色 内容分页媒体 定位 可伸缩框 字体 生成内容 网格 超链接 行框 列表 外边距 Marquee 多列 内边距 分页媒体 定位 打印 Ruby ...

  4. from表单、css选择器、css组合器、字体样式、背景属性、边框设置、display设置

    目录 一.form表单 1.form表单功能 2.表单使用原理 二.前端基础之css 1.关于css的介绍 2.css语法 3.三种编写CSS的方式 3.1.style内部直接编写css代码 3.2. ...

  5. CSS 简介、语法、派生选择器、id 选择器、类选择器、属性选择器

    CSS 概述 CSS 指层叠样式表 (Cascading Style Sheets) 样式定义如何显示 HTML 元素 样式通常存储在样式表中 把样式添加到 HTML 4.0 中,是为了解决内容与表现 ...

  6. css 基本语法及页面引用:

    css基本语法: css的定义方法是: 选择器{ 属性:值; 属性:值; 属性:值; } 选择器是将样式和页面元素关联起来的名称,属性是希望设置的样式属性,每个属性有一个或多个值. 如: div{ w ...

  7. css基本语法及页面引用

    css基本语法 css的定义方法是: 选择器 { 属性:值; 属性:值; 属性:值;} 选择器是将样式和页面元素关联起来的名称,属性是希望设置的样式属性每个属性有一个或多个值.代码示例: div{ w ...

  8. CSS基础语法与选择器

    CSS基础 语法 : <head> <style type="text/css"> 选择器(即修饰对象){ 修饰属性:属性值; 修饰属性:属性值; } &l ...

  9. CSS之背景设置、字体设置、文本设置

    <html> <head> <meta charset="utf-8"> <title>单行文本框与多行文本框</title& ...

随机推荐

  1. ArrayList、Vector、LinkedList的区别

    ArrayList.Vector.LinkedList的区别 1.底层数据结构: ArrayList底层实现是动态数组 Vector底层实现是动态数组 LinkedList底层实现是双链表  2.扩容 ...

  2. 对象拷贝extend

    如果想要把某个对象拷贝(合并)给另外一个对象使用,此时可以使用$.extend()方法 语法: $.extend([deep],target,object1,[objectN]); 1.deep:如果 ...

  3. Mac上Chrome浏览器跨域解决方案

    现在比较新的浏览器在本地调试时AJAX请求,基本都会有跨域问题.相应的解决方案也挺多的,工具也不少.像charles等抓包工具等.不过最简单的就是移除浏览器的同源限制. 我们要做的第一步,就是创建一个 ...

  4. shell脚本输出空心等腰三角形

    第一种:(for循环) #!/bin/bash#空心等腰三角形arr=9 #定义金字塔的层数for ((i=1;i<=$arr;i++))do for ((j=1;j<=$(($arr-$ ...

  5. C++11 auto 与 右值

    auto: auto T = xxx; // 产生一个变量,自动推导变量类型.  存在变量拷贝的消耗.auto& T = xxx; // 产生一个变量的引用,自动推导变量类型.减少拷贝的消耗. ...

  6. Vue-cli开发笔记三----------引入外部插件

    (一)绝对路径直接引入: (1)主入口页面index.html中头部script标签引入: <script type="text/javascript" src=" ...

  7. (补充)9.Struts2中的OGNL表达式

    OGNL表达式概述 1. OGNL是Object Graphic Navigation Language(对象图导航语言)的缩写 * 所谓对象图,即以任意一个对象为根,通过OGNL可以访问与这个对象关 ...

  8. nodejs route的简单使用

    demo var express=require('express'); var app=express(); var routeUser=express.Router(); var routeTea ...

  9. 微信小程序之自定义组件

    在微信小程序项目中 肯定会存在很多功能和样式上相似的部分 面对这种情况 只是单单的ctrl+c ctrl+v 就显得很low了,而且也不便于后期维护那么这时候 使用微信小程序中的自定义组件功能就很合适 ...

  10. leetcood学习笔记-257-二叉树的所有路径

    题目描述: 第一次提交:参考113-路径总和② class Solution: def binaryTreePaths(self, root: TreeNode) -> List[str]: r ...